css总结

css总结

css全称为层叠样式表（Cascading Style Sheet） 学习CSS最主要的就是学习其中的标签和属性。牢记其中的标签含义以及用法，便能够流畅的使用CSS来美化和布局。
在主页制作时采用daoCSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）可以轻松地控制页面的布局 。
（5）将许多网页的风格格式同时更新，不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

css布局

css布局中，盒子模型是核心，每一个标签都是一个小盒子，通过对其属性的修改，达到目的。

盒子模型6大属性：

1）内容区域 width height
width 和 height
对于男盒子来说，表示内容区域
对于女盒子，width和height不起作用

    注意点：
    1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
    2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
    3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。

2）内填充区域  padding 
用来设置内填充，也叫补白  表示内容区域和边框之间的距离 

    四个方向： 用的也比较多的
        padding-top: 
        padding-right:
        padding-bottom:
        padding-left:
    
    padding后面也可以跟一个值，二个值，三个值，四个值：
        一个值：padding:10px  四个方向的padding都是10px
        二个值：padding:10px 20px;   上下是10px  左右是20px
        三个值：padding:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值：padding:10px 20px 30px 40px;   上 右 下 左
    
    注意点：
    1）有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }
    2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
    3）对于块级元素来说，上下padding可以撑起男盒子的高度。
3）边框  border
 边框的粗细  border-widht 
    边框的样式  border-style 
    边框的颜色  border-color 
        一般情况下，不会单独设置  border是一个复合属性
    注意点：
    1）border:1px solid red;  border后面的属性是没有顺序的，但是一般都是先写border-width,然后是border-style，最后是border-color。
    2）粗细大部分情况下单位都是px  你也可以使用单词  使用单词时  在不同的浏览器下代表粗细是不一样的
    3）边框的样式也非常多 用的非常多的有这几个：solid 实线   dotted 点画线  dashed 虚线  none 没有线  ..... 
    4）边框的颜色设置  单词  用的最多还是16进制  也可以使用rgb函数
    5）也可以单独设置某一个方向上的border  border-top:1px solid red; 用的也比较多

4）外填充区域  margin
 表示外边距  盒子与盒子之间的距离  是边框之外的间隔  是在border之外的 
    四有个方向：
        margin-top 
        margin-right 
        margin-bottom 
        margin-left  
    margin后面也可以跟一个值，二个值，三个值，四个值：
        一个值：margin:10px  四个方向的margin都是10px
        二个值：margin:10px 20px;   上下是10px  左右是20px
        三个值：margin:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值：margin:10px 20px 30px 40px;   上 右 下 左
5）背景  <img />   也可以给img添加背景图片

块级元素并排显示：

1）浮动 
2）flex 
3）定位
4）行内块

浮动

浮动的初衷：为了实现新闻的字围效果。

浮动的元素半脱离标准文档流：
出国了
浮动刚开始就为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫字围效果。

现在我们基本上利用浮动并不是为了实现字围效果，我们主要使用浮动来让块级元素并排显示。

---

浮动元素的特点：
1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）如果一个女盒子浮动了，就可以设置宽度和高度，说白了，女盒子就变成男盒子

---

元素浮动会造成影响：
1）对父元素造成的影响
2）对后面的兄弟元素影响

我们需要清除浮动所造成的的影响，也叫清除浮动：
1）清除对父元素所造成影响
A）overflow:hidden
B）加高法

元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最实用：clear:both

样式的应用顺序

1）行内样式的优先级最高
2）针对相同的样式属性，不同的样式属性将以合并的方式呈现
3）相同样式，相同属性 呈现方式为就近原则

重要的选择器

1.通用选择器（应用到所有标签）
*{margin:0;padding:0;}
2.标签选择器
3.类选择器
4.id选择器（唯一，不能以数字开头）
#Mycolor {color: yellow}

H3

5.组合选择器（同时匹配多个标签，用逗号隔开） 6.后代元素选择器（匹配所有标签里嵌套的标签，之间用空格分隔） 7.子代元素选择器（匹配所有*标签里嵌套的标签，之间用>分割） 8.伪类选择器 link、hover、active、visited、 a:link（未访问的链接状态）,用于定义了常规的链接状态。 a:hover (鼠标放在链接上的状态）,用于产生视觉效果。 a:active(在链接上按下鼠标时的状态) a:visited（已访问的链接状态）可以看出已经访问过的链接

2. before、after

P:before 在每个

元素的内容之前插入内容;
P:after 在每个

元素的内容之后插入内容

透明度

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

字体属性

1.italic 文本斜体显示
2.oblique 文本倾斜显示
font-wight（加粗）
bold 加粗
bolder 更粗
3.text-indent （文本缩进） em

背景属性

1.background-image 设置为背景图像
url（地址）
2.渐变效果 background-image:linar-gradient(green,blue,yellow,red,black)
3.background-position (设置背景图像的坐标位置)
屏幕右方为x轴方向，下方为y轴方向
4.background-repeat 设置背景图像不重复平铺
1)no-repeat 设置图像不能重复，常用
2）round 自动缩放直到适应并填充充满整个容器
3）space 以相同的间距平铺并充满整个容器

列表属性

list-style-type
none 去除标志
border-color：边框颜色
border-width：边框宽度
border-radius：圆角

页面布局

边框
border-style：边框样式
solid 实线
double 双线
dotted 点状线条
dashed 虚线

display

none 不显示。
block 显示为块级元素。
inline 显示为内联元素。
inline-block 行内块元素（会保持块元素的高宽）。
list-item 显示为列表元素。