目录
一、盒子模型
1、盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：border边框、margin外边距、padding内边距、和content实际内容
1.边框（border）
border属性：border-width || border-style（solid实线、dotted点线、dashed虚线） || border-color
边框简写：border: 5px solid red;没有顺序
边框分开写法：border-top: 1px solid red;/*只设定上边框，其余同理*/
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框（collapse合并）
border-collapse:collapse;
边框会额外增加盒子的实际大小
2.内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离
padding属性：padding-bottom || padding-left || padding-right || padding-top
内边距简写：
①当只指定一个值时，该值会统一应用到全部四个边的内边距上
②指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边
③指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距
④指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距
内边距会影响盒子实际大小，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子；如何盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
3.外边距（margin）
margin属性：margin-bottom || margin-left || margin-right || margin-top
外边距简写：同内边距
外边距可以让块级盒子水平居中，但是必须满足两个条件：①盒子必须指定了宽度（width）②盒子左右的外边距都设置为auto
常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
外边距合并：
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与 margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：①可以为父元素定义上边框；②可以为父元素定义上内边距；③可以为父元素添加overflow:hidden
清除内外边距：网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
margin : 0;
padding : 0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。二、圆角边框
border-radius属性用于设置元素的外边框圆角，该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
语法：border-radius:length（数值或百分比）;
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
使用：如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% ；如果是个矩形，把数值设置为高度的一半三、盒子阴影
box-shadow属性为盒子添加阴影
语法：
box-shadow:h-shadow v-shadow blur spread color inset;
水平阴影位置[必需，可负值]、垂直阴影位置[必需，可负值]、模糊距离、阴影尺寸、阴影颜色、将外部阴影（outset）改为内部阴影
注意：1.默认的是外阴影（outset），但是不可以写这个单词否则导致阴影无效；2.盒子阴影不占用空间，不会影响其他盒子排列四、文字阴影
text-shadow属性将阴影应用于文本
text-shadow:h-shadow v-shadow blur color;五、浮动
1、传统网页布局的三种方式（PC端）：
标准流（普通流/文档流）：标签按照规定好默认方式排列，是最基本的布局模式
浮动
定位
***网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2、浮动：可以让多个块级元素一行内排列显示
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：选择器（float：属性值；} none不浮动（默认值）、left元素向左浮动、right元素向右浮动
浮动特性：
①浮动元素会脱离标准流（脱标）：
脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标）
浮动的盒子不再保留原先的位置
②浮动的元素会一行内显示并且元素顶部对齐
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
③浮动的元素会具有行内块元素的特性：
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的 ●行内元素同理
浮动的两个注意点：
浮动元素经常和标准流父级搭配使用：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动：一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题；浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
***网页布局第二准则：先设置盒子大小，之后设置盒子的位置六、清除浮动
原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）
本质：清除浮动元素造成的影响。清除浮动之后，父级就会根据浮动的子盒子自动检测高度
策略：闭合浮动
语法：选择器{clear:属性值;}[left、right、both（实际工作只用）]
方法：
①额外标签法也称为隔墙法，是W3C推荐的做法
在浮动元素末尾添加一个空的标签（必须是块级元素）。例如<div style=”clear:both”></div>，或者其他标签（如<br/>等）
②父级添加overflow属性[缺点：溢出]
可以给父级添加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（建议display第一个写，毕竟关系到模式）
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...八、定位
必要性：
1．浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位组成：
定位,即将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
一.定位模式，通过position属性设置
static静态定位、relative相对定位、absolute绝对定位、fixed固定定位、sticky粘性定位（了解）
①静态定位是元素的默认定位方式，无定位；特点：按照标准流特性摆放位置，它没有边偏移
②相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）；特点：1．它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）； 2．原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
③绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）；特点：1．如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）； 2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置；3.绝对定位不再占有原先的位置（脱标）
常用方法【“子绝父相”（父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位）】
④固定定位是元素固定于浏览器可视区的位置；特点：1．以浏览器的可视窗口为参照点移动元素（跟父元素没有任何关系、不随滚动条滚动）；2.固定定位不再占有原先的位 置
固定定位小技巧：固定在版心右侧位置。
小算法：1．让固定定位的盒子left:50%．走到浏览器可视区（也可以看做版心）的一半位置。2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的 一半位置就可以让固定定位的盒子贴着版心右侧对齐了
⑤粘性定位[兼容性差],可以被认为是相对定位和固定定位的混合；特点：1.以浏览器的可视窗口为参照点移动元素（固定定位特点）；2．粘性定位占有原先的位置（相对定位 特点）；3．必须添加top、left、right、botom其中一个才有效
二.边偏移，就是定位的盒子移动到最终位置，有top（顶端偏移量，定义元素相对于其父元素上边线的距离）、bottom、left和right4个属性
定位叠放次序z-index：
选择器 { z-index: 1；}
数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上;如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位；*只有定位的盒子才有z-index属性
拓展：
1 绝对定位的盒子在浏览器居中显示
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
(1)left:50%;：让盒子的左侧移动到父级元素的水平中心位置。(2)margin-left:-100px;:让盒子向左移动自身宽度的一半。
2 定位特殊特性
绝对定位和固定定位也和浮动类似。
(1)行内元素添加绝对或者固定定位，可以直接设置高度和宽度。(2)块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4 绝对定位（固定定位）会完全压住盒子
(1)浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。(2)但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素九、页面布局整体思路
1．必须确定页面的版心（可视区），测量可得知
2.分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则
3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置。页面布局第二准则
4.制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要十、网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。十一、元素的显示与隐藏
1.display显示隐藏。display隐藏元素后，不再占有原来的位置
display:none；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思
2.visibility显示隐藏。visibility隐藏元素后，继续占有原来的位置
visibility：visible；元素可视
visibility：hidden;元素隐藏
3.overflow溢出显示隐藏。overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
overflow:visible不剪切内容也不添加滚动条
overflow:hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow:scroll不管超出内容否，总是显示滚动条
overflow:auto超出自动显示滚动条，不超出不显示滚动条
如果有定位的盒子，请慎用overflow:hidden,因为它会隐藏多余的部分
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
