一.水平布局
1.水平方向能影响到inner所占位置的因素有哪些
margin-left, border-left, padding-left ,width ,padding-right ,border-right ,margin-right
2.什么是过度约束:
浏览器规定,元素水平方向7个值相加,必须要等与其父元素内容区的宽度,
如果不等于,浏览器就会进行调整,让等式成立
margin-left+border-left+padding-left + width + padding-right +
border-right+ margin-right=父元素内容区的宽度
3. 浏览器如何调整
1、如果水平方向7个值当中没有auto,浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
2、7个值当中,有3个值可以设置auto,margin-left width margin-right
(1) 设置1个auto 谁是auto,浏览器就调整谁
(2)设置2个auto
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时调整margin-left margin-right
(3)设置3个auto
margin-left width margin-right 调整的就是width
总结:
1、如果7个值当中有auto,调整的顺序
width > margin-left margin-right
2、如果想让块元素水平方向居中,必须要width为固定值,左右外边距为auto
二.垂直布局
1. 块元素默认情况下,宽度是父元素内容区的100%,高度是被内容撑开
在垂直布局中,一般情况下,我们是不设置高度的,让元素被内容撑开
2 . 使用overflow属性设置父元素如何处理溢出的子元素
可选值:
visible 默认值 文本正常显示
hidden 裁剪掉多余的内容
scroll 生成双向的滚动条,可以通过滚动条查看完整的内容
auto 根据实际的内容出现滚动条
overflow-x 对水平方向溢出的内容进行设置,垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置,水平方向根据实际需要自动生成
三.垂直外边距的重叠
1.兄弟元素
如果两个值都是正值,谁大听谁的
如果两个值是负值,谁小听谁的(绝对值谁大听谁的)
如果是一正一负,那最终的值,两者相加
兄弟元素的外边距重叠,一般情况对我们的开发是有利,不需要做特殊处理
2.父子元素
如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,
导致父元素的位置发生变化,会影响到父元素下面的布局,
所以这个问题必须要解决
1、不要用margin
2、将父子外边距隔开,例如可以用边框,添加一个空表格
3、开启元素的隐含属性BFC overflow:hideen;
四.内联元素盒子
内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开
内边距 :行内元素盒子模型可以设置内边距,而且垂直方向的内边距不会影响其他的元素的位置
边框 :行内元素盒子模型可以设置边框,而且垂直方向的边框也不会影响其他的元素的位置
外边距:水平方向的外边距可以设置成功的,而且水平方向的外边距不会重叠
垂直方向的外边距不可以设置
五.默认样式
1:手动去除
这种方式一般情况只适用一些小的案例,小的项目
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
2:引入重置样式表
这个表就是网上的大神列举出来的所有的标签的默认样式
reset.css,normal.css
我们使用的时候,只需要引入到对应的html文件内就可以
六.盒子的大小
默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定
设置width,height特指内容区的宽高
box-sizing 用来设置盒子尺寸的计算方式 用来规定width,height指的谁
可选值:
content-box width,height指的是内容区宽高,默认值
border-box width,height指的就是内容区,内边距,边框加起来的大小
七.阴影与圆角
1.box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->右 负->左 必写
第二个值:垂直偏移量 正->下 负->上 必写
第三个值:模糊半径 选写,默认值是0
第四个值:颜色 选写,默认值是黑色
2.border-radious
a、border-radius 用来设置圆角
可以同时设置多个值,规则跟我们之前归纳的border-width一样
b、单独设置某一角的圆角
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius:;
border-bottom-right-radius:;
c、设置圆形
border-radius: 50%;