WEB前端之CSS学习续

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括:边框、内外边距和实际内容。

border:边框     content:内容      padding：内边距       margin:外边距

边框border可以设置元素的边框，边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。

border-width:边框粗细，单位为px。

border-style:边框样式，none | hidden | dotted(点线边框) | dashed(虚线边框) | solid(实线边框) | double | groove | ridge | inset | outset

border-color:边框颜色

边框可以进行简写:1px  solid  red;//没有先后顺序

边框可以分开来写：border-top: 1px  solid  red;  只设定上边框，其余同理。

表格的细线边框：border-collapse属性控制浏览器绘制表格边框的方式控制相邻单元格的边框。

border-collapse:collapse表示合并单元格的边框。

边框会影响盒子的实际大小，会变大。

内边距：padding用于设置内边距，边距与内容间的距离。

padding-left:20px;

padding-top:30px;

padding属性简写：

        padding:5px;  1个值表示上下左右都有5px内边距。

        padding: 5px 10px;  2个值，代表上下内边距是5px,左右边距是10px.

        padding:5px 10px 20px; 3个值，代表上边距5px,左右内边距10px,下边距20px.

        padding:5px 10px 20px 30px; 4个值，代表上、下、左、右内边距分别为5px,10px,20px,30px.

padding会改变盒子的实际大小，内边距可以撑开盒子。

如果盒子本身没有指定width/height,padding内边距无法撑开盒子

子元素如果不指定宽度，则默认和父亲宽度相同;
继承宽度、不继承高度;

外边距margin:用于设置外边距，即控制盒子与盒子之间的距离;
margin简写方式和padding完全一样;

外边距可以让块级盒子水平居中，但必须满足两个条件：1)盒子必须指定宽度;2)盒子左右外边距都设置为auto;

外边距合并：使用margin定义块元素垂直外边距，会出现外边距的合并;
1)当上下两个块级元素相遇时，上边的元素有下边距margin-bottom,下面的元素有上边距margin-top，则垂直距离不是margin-bottom与margin-top之和，取两个值中较大者这种现象被称为相邻元素垂直外边距的合并，因此尽量只给一个盒子添加margin值;
2)嵌套垂直外边距:
    对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值;
    解决方案:1)为父元素定义上边框;2)为父元素定义上内边距;3)为父元素添加overflow:hidden;

清除内边距:    网页元素带有默认的内外边距，使用不同浏览器默认设置不一样，因此会在布局前，首先清楚网页元素的内外边距;

* {
    padding:0px;
    margin: 0px;
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了;s

去掉li前面的项目符号(小圆点)
list-style:none;

CSS3中新增了圆角边框样式，盒子就可以变成圆角了;
border-radius属性用于设置元素的外边框圆角;
border-radius:length;
radius半径(圆的半径)原理：椭圆形边框交集形成圆角;
使盒子成为一个圆，先来一个正方形，然后使length为边的一半;

盒子阴影：CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影;
语法：box-shadow：h-shadow v-shadow blur spread color inset;
h-shadow  必须，水平阴影的位置，允许为负值;
v-shadow  必须，垂直阴影的位置，允许负值;
blur     可选，模糊距离；
spread   可选，阴影的尺寸;
color    可选，阴影的颜色;
inset    可选，可将外部阴影改为内部阴影;
盒子阴影不占用空间;
文字阴影(了解):
 text-shadow属性将阴影应用于文本;
 text-shadow:h-shadow v-shadow blur color;
 h-shadow 必须，水平阴影的位置，允许负值;
 v-shadow 必须，垂直阴影的位置，允许负值;
 blur 可选，模糊距离;
 color 可选，阴影的颜色;

 CSS浮动：
 传统网页布局的三种方式：1）普通流(标准流/文档流);2)浮动;3)定位;
 普通流：标签按照默认好的方式进行排列;最基本的布局方式;
 浮动典型的应用：可以让多个块级元素一行内排列显示;
 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；
 浮动：用于创建浮动框，将其移动到一端，知道左边缘或者右边缘触及包含块或者另一个浮动框边缘;
 语法：
 选择器 {
     float:属性值;
 }
 属性值      描述
 none        元素不浮动
 left       元素向左浮动
 right      元素向右浮动;

 浮动特性：
 1)浮动元素会脱离标准里(脱标);
 2)浮动元素会一行内显示并且元素顶部对齐;
 3)浮动元素会具有行内块元素特性;

 浮动的盒子不再保留原先的位置;
 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列;
 任何元素都可以浮动，无论原先是什么模式的元素，添加浮动后，具有行内块元素特性;
 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定;
 浮动元素经常和标准流父级搭配使用：
 为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置;
 网页布局先设置盒子大小，再设置盒子位置;

 浮动布局注意点：
 如果一个元素浮动了，理论上其他兄弟元素也要浮动

 标准的父元素是有高度的，但有时候不方便给父盒子高度；参考商品多少不定;
 理想状况下，让子元素撑开父盒子;
 子盒子浮动不占有位置，最后父级盒子高度为0;使用清除浮动来解决这个问题;
 
 清除浮动：清除浮动元素造成的影响;
 如果父盒子本身有高度，则不需要清除浮动；
 清楚浮动后，父级就根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流;
 选择器 {
     clear:left/right/both;
 }

 清除浮动的方法：
 1)额外标签法(隔离法);
 2)父级添加overflow属性;
 3)父级添加after伪元素;
 4)父级添加双伪元素;

 额外标签法：浮动最后一个元素后面添加一个空的标签;例如<div style="clear:both"></div>或者其他标签<br>
 新添加的空标签要求是块级标签，不能是行内标签;
 可以给父级元素添加overflow属性，将其属性值设置为hidden/auto/scroll;
 清除浮动：after伪元素;
 :after是给父级元素添加
 .clearfix:after {
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
 }
 .clearfix {
     /*IE6、7专有*/
     *zoom:1;
 }

 清除浮动——双伪元素清除浮动;
 .clearfix:before,.clearfix:after {
     content:"";
     display:table;
 }
 .clearfix:after {
    clear:both;
 }
 .clearfix {
     *zoom:1;
 }

CSS属性书写顺序，建议遵循以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow;
2.自身属性：width/height/margin/padding/border/background;
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
4.其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient;

实际开发中，我们不会直接用链接a,而是用li包含li+a的做法；
li+a语义更清晰，有条理的列表;
如果直接用a,搜索引擎容易辨别为堆砌关键字嫌疑，影响网站排名;
nav导航栏可以不给宽度，将来可以继续添加其余文字;
因为导航栏里面文字不一样多，最好给链接a左右padding撑开盒子，而不是指定宽度;

浮动的盒子不会有外边距合并的问题;