网页布局要注意的事项，以及CSS3需要特别注意的地方。

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;隐藏超出部分，出省略号

一定要先布局！布局！布局！要先设置好色块，将位置确定。

布局的时候一定要先设置好，宽高，位置，

尽量不要用margin属性调特别大！！的位置！！！

box-sizing: border-box;/*自适应盒子*/

line-height: 50px;/*居中*/

list-style-type: none;/*有序无序列表样式消除*/

cursor: pointer;/*改变鼠标样式*/

border-bottom: 1px dotted #ddd;/*边框样式改变*/

text-indent:2em;/*首行缩进*/

input style :”outline:none;”/*将输入框的边框隐藏，界面优化*/

背景图要先设置好宽高，设置行。块。行内块。元素。才可连接无内容显示图片。

对于自身定位（relative）可以设置上下左右padding值确定背景的变化。（国务院）

bootstrap

css3

兼容性：

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round; /* Opera */

border (边框)

边框圆角 radius: 25px;（或者百分比）

盒子阴影 box-shadow:左右偏移量上下偏移量虚化程度颜色；

边界图片 border-image：url(图片路径) 上下边框左右边框 stretch(拉伸)round(平铺)；

background(背景图片)

可添加多张图片进行位置调控。

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

#example1 {

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

background-origin指定背景图的位置区域。（背景裁剪：background-clip）

border-box;设置在盒子里面的位置。

content-box;设定在内容里面的位置。

背景裁剪

渐变

background：Linear Gradients（方向(180deg) red blue ）；线性渐变

从上到下（默认） to right(从左向右) to bottom right（对角线）

可以带有角度的变化

重复的线性渐变

background: repeating-radial-gradient(red, yellow 10%, green 15%);

background：Radial Gradients（ 180deg red blue）；径向渐变

background: radial-gradient( （形状） red 15%, green 25%, blue 60%);

circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

可以为负值。

文本效果

text-overflow：隐藏掉无法显示的文字。hidden。

文字的强制换行。word-wrap word-break。

可引入字体文件。

2D、3D转换。

转换：transform:属性；

偏移translate(30px，50px);方法

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

旋转rotate(30deg);方法

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

放大缩小scale(2（2倍宽度），3（3倍高度）);方法

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

过渡效果：transition

transition: width 2s;通过设置秒数，改变过渡的样式。

动画：animation

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

}

@keyframes myfirst{

from {background:red;}

to {background:yellow;}

}

弹性盒子

display：flex;

设置direction:rtl;盒子内的元素的排列方向（右到左）

flex-direction 属性指定了弹性子元素在父容器中的位置。

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: stretch;

align-items: stretch;（此处修改属性）

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;

}

</style>

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch