目录
一、页面布局整体思路
①确认可视区(版心)
②确定行模块及其中的列模块
③一行中的列模块常浮动布局,确定每列大小之后确定位置
④html结构遵循先有结构 后有样式原则
一些总结
①垂直块级盒子显示用标准流布局
②多个块级盒子水平显示用浮动布局
③元素自由在某盒子内移动用定位布局
二、盒子模型
1.盒子模型
封装周围的HTML元素,包括:边框,外边距,内边距,实际内容
border边框 content内容 padding内边距 margin外边距
width、height设置的都是内容区
2.边框border
border可设置元素边框宽度(粗细px),样式,颜色
border:border-width | | border-style | | border-color;
样式 solid实线边框 dashed虚线边框 dotted点线边框 hidden隐藏边框
简写方式:border:1px solid red;没有先后顺序
只修改上边框border-top:1px solid pink;
bottom下边框
3.表格的细线边框border-collapse
border-collapse控制浏览器绘制表格边框的方式,控制相邻单元格的边框
border-collapse:collapse;
相邻边框合并在一起
4.边框会影响盒子实际大小
边框会额外增加盒子大小
盒子已经有了宽度和高度,再指定内边框会撑大盒子
不指定宽度/高度,盒子不会撑开
5.内边距padding
内容和边框的距离padding-left/right/top/bottom
简写:
padding:5px;(上下左右都是5px)
padding:5px 10px;(上下5px左右10px)
padding:5px 10px 20px;(上5px左右10px下20px)
padding:5px 10px 20px 30px;(上5右10下20左30顺时针)
※border-width,style,padding都是
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
6.外边距margin
控制盒子和盒子之间的距离
margin-left/right/top/bottom
简写方式和padding一样
7、水平布局
——元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right共同决定。
——必须满足margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度
——若等式不成立(过度约束),等式会自动调整
调整情况:
①若七个值没有auto,浏览器会自动调整margin-right值以使等式成立。
②width、margin-left、margin-right可设置auto,若某值为auto则会自动调整auto的值以使等式成立。
③若一个宽度和一个外边距设为auto,则宽度会调整到最大,设置为auto的外边距自动为0。
④若三个值都auto,则外边距0,宽度最大。
⑤若两外边距auto,宽度固定,则会将外边距设为相同的值(平分)【利用此实现水平居中】
eg. width:xxxpx;
margin:0 auto;
8、垂直布局
——默认情况下父元素高度被内容撑开
——子元素在父元素内容区中排列
如果子元素大小超出父元素,则子元素会从父元素中溢出
给父元素使用overflow属性处理溢出
overflow-x,overflow-y,处理单方向
可选值:
visible 默认值 子元素会从父元素中溢出,在父元素外部位置显示
hidden 溢出内容将会被裁剪不会显示(对文字不友好)
scroll 生成两个滚动条,通过滚动条查看完整内容
auto 根据需要生成滚动条
9、外边距的折叠
——相邻的垂直方向外边距会发生重叠现象
——兄弟元素
兄弟元素间的相邻垂直外边距取两者之间较大值
特殊情况:相邻外边距一正一负则取两者和
相邻外边距都负则取绝对值大的
兄弟元素外边距重叠对开发有利不需要处理
——父子元素
父子元素间的相邻外边距,子元素的会传递给父元素(上外边距)
父子外边距折叠会影响页面布局,需要处理
处理方法:①可用padding-top调小盒子位置【需减height】
②可给大盒子加border(-top)将两个外边距隔开【需减height和小盒子margin】
③开启BFC/clearfix/before伪类
10、浏览器默认样式
去除浏览器默认样式(PC端页面)
默认有外边距,去除用
*{
margin: 0;
padding:0;
}
或者把重置样式表拖进去,在<head>里title下最上面加
<link rel=“stylesheet” href=“./css/reset.css”>(直接去除浏览器默认样式)或
<link rel=“stylesheet” href=“./css/normalize.css”>(对默认样式进行统一)
<ul>默认小黑点,去除用list-style:none;(去除项目符号)
11、盒子大小box-sizing
默认情况下,盒子可见框大小由内容区、内边距、边框共同决定
box-sizing用来设置盒子尺寸计算方式(设置width、height作用)
可选值:
content-box默认值,宽度高度用来设置内容区大小。 盒子大小=width+padding+border
border-box设置整个盒子可见框大小(内容区、内边距、边框之和) 盒子大小=width
12、轮廓阴影和圆角
①轮廓outline
outline 设置元素轮廓,用法和border一样(轮廓不影响可见框大小)
②阴影box-shadow
box-shadow 设置元素阴影效果(阴影不影响页面布局)
写法:box-shadow:10px 10px 10px black;
第一个值:水平偏移量,正值向右负值向左
第二个值:垂直偏移量,正值向下负值向上
第三个值:阴影模糊半径
第四个值:阴影颜色,一般用rgba,最后一个透明值
③圆角border-radius
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
用法
border-top-left-radius:50px;(半径为50的圆角)
border-top-left-radius:50px 100px;(水平50半径垂直100半径)
border-radius:50px;(四个角都是50半径)
border-radius:10px 20px 30px 40px;
(四个值:左上 右上 右下 左下
三个值:左上 右上左下 右下
两个值:左上右下 右上左下)
border-radius:50%;(圆形)
三、浮动
1、浮动(float)
可选值:
none默认值,不浮动
left 元素向左浮动
right元素向右浮动
注:元素设置浮动后,水平布局不需要强制成立等式
【想并排排列,可以每个div都设置float】
2、浮动特点
Ⅰ、
①完全脱离文档流,不占据文档流位置元素下的还在文档流中的元素会自动向上移
②浮动可使一个元素向其父元素左侧或右侧移动
③浮动元素默认不会从父元素中移出
④浮动元素向左或向右移动时不会超过它前边的其他浮动元素
⑤如果浮动元素上边是一个没有浮动的块元素,则浮动元素无法上移
⑥浮动元素不会超过它上边浮动的兄弟元素,最多和他一样高
Ⅱ、
①浮动元素不会盖住文字,文字会自动环绕在浮动元素周围(可利用此设置文字环绕图片的效果)
②浮动后元素特点会变化,脱离文档流的特点:
1>块元素:
块元素不在独占一行
宽度高度默认被内容撑开
2>行内元素
变成块元素,特点和块元素一样
【脱离文档流后不再区分块和行内】
3、高度塌陷和BFC
高度塌陷:浮动布局中,父元素高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,无法撑起父元素高度,导致父元素高度丢失。
BFC:Block Formatting Content 块级格式化环境,css中隐含属性,开启BFC该元素会变成一个独立布局区域。
开启BFC后元素特点:
①开启BFC的元素不会被浮动元素所覆盖
②开启BFC的元素子元素和父元素外边距不会重叠
③开启BFC的元素可包含浮动的子元素【不会塌陷】
通过特殊方式开启BFC:
①设置元素浮动(不推荐,副作用大)
②将元素设置为行内块元素(不推荐,副作用大)
③将元素overflow设置为一个非visible的值(一般hidden)
4、clear
①如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过clear清除浮动元素对当前元素所产生的影响。
②作用:清除浮动元素对当前元素所产生的影响
③可选值:
left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的那侧
④原理:浏览器自动为元素添加一个上外边距以使其位置不受其他元素影响
5、after伪类解决高度塌陷(最完美方案)
①可以在box1框内多加子元素box3(clear:both)【因为是表现上的问题和结构没关,所以一般不用】
②给会塌陷的box1加样式.box1::after{content:'';display:block;clear:both;}
(after伪类是行内元素所以需要转换块元素)
6、before伪类解决外边距重叠
给box1(父)加.box1::before{content=''; display=table;}
原理:将父子用空内容隔开
7、clearfix(是一个类,用时直接加)
clearfix可同时解决高度塌陷和外边距重叠的问题,当你遇到这些问题时,直接用这个类就行。
.clearfix::before,
.clearfix::after{
content:'';
dislay:table;
clear:both;
}
<div class="box1 clearfix">
<div class="box2"></div>
</div>
四、定位(position)
定位是更高级的布局手段,通过定位可将元素摆到页面任意位置
可选值:
static 默认值,元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
偏移量(offset)
元素开启定位以后,可以通过偏移量来设置元素位置
top 定位元素和定位位置上边的距离(越大越向下)
bottom 定位元素和定位位置下边的距离(越大越向上)
left 定位元素和定位位置左边的距离(越大越靠右)
right 定位元素和定位位置右边的距离(越大越靠左)
1、相对定位(relative)
特点:
①元素开启相对定位后,如果不设置偏移量元素不会发生任何变化
②参照于元素在文档流中位置进行定位(原来位置)
③相对定位会提升元素的层级(会盖住其他元素)
④相对定位不会使元素脱离文档流、性质即块.行内.行内块
2、绝对定位(absolute)
Ⅰ、特点:
①开启绝对定位后,如果不设置偏移量元素位置不会发生变化
②元素会从文档流中脱离
③绝对定位会改变元素性质,行内变成块,块的宽高被内容撑开
④绝对定位会使元素提升一个层级
⑤绝对定位相对于其包含块进行定位
Ⅱ、包含块(containing block)
——正常情况下:包含块是离当前元素最近的祖先块元素
——绝对定位下:包含块是离它最近的 开启了定位的祖先元素,如果所有元素都没开启定位则根元素就是它的包含块(html根元素、初始包含块、浏览器)
Ⅲ、绝对定位元素位置
绝对定位
水平方向布局等式左边多加left、right,规则还一样。
left、right也能设auto
垂直方向布局等式左边多加top、bottom
Ⅳ、子绝父相
父级需要占位置所以用相对定位,子盒子不占位置且要在父盒子内移动故用绝对定位。
3、固定定位(fixed)
固定定位也是一种绝对定位,特点大部分和绝对定位一样
不同的是固定定位永远参照于浏览器视口进行定位
4、粘滞定位(sticky)
和相对定位特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
【兼容性不好】
top值写多少就相当于在那抹了胶
5、元素层级(z-index)
需要一个整数作为参数,值越大层级越高,元素层级越高越优先显示。
如果元素层级一样,优先显示靠下的元素。
祖先的元素层级再高也不会盖住后代元素。
6、一些小技巧
Ⅰ、固定定位在版心右侧
position:fixed;
left:50%; //视口一半位置
margin-left:600px; //版心盒子的一半(以上)位置
Ⅱ、绝对定位盒子居中
position:absolute;
left:50%; //视口一半位置
margin-left:-100px; //向左盒子一半
top:50%;
margin-top:-100px;
7、其他特性
①行内元素添加绝对或固定,可直接设置宽高
②块元素添加绝对或固定,不给宽高则默认内容大小
③脱标的盒子(浮动、绝对、固定)不会外边距塌陷
④绝对定位、固定定位会压住标准流所有内容,浮动不会压住标准流的文字、图片,只会压住盒子。
8、定位总结
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
静态定位(static) | 否 | 不能边偏移 | 否 |
相对定位(relative) | 否(占位) | 相对自身位置移动 | 是 |
绝对定位(absolute) | 是(不占位) | 相对带有定位的父级 | 是 |
固定定位(fixed) | 是(不占位) | 浏览器视口 | 是 |
粘性定位(sticky) | 否(占位) | 浏览器视口 | 否 |