(此为从学习视频中摘抄,如有雷同,纯属巧合)
-
盒子模型
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置盒子内容区的大小,而不是盒子的整个大小
盒子可见宽的大小由内容区,内边距和边框共同决定
例:width: 100px;
height: 100px;
设置背景颜色
例:background-color: #bfa;
为元素设置边框
大部分的浏览器中,边框的宽度和颜色都是有默认值,而边框的样式默认值都是none
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-coloer:边框颜色
border-style:边框的样式使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值,
则四个值会分别设置给上、右、下、左,按照顺时针的方向设置的
如果指定三个值,
则三个值会分别设置给上、左右、下
如果指定两个值,
则两个值会分别设置给上下、左右
如果指定一个值,
则四边全都是该值除了border-width,CSS中还提供了四个border-xxx-width
xxx的值可能是top、right、bottom、left
专门用来设置指定边的宽度
例:border-width: 10px 20px 30px 40px;
设置边框的颜色
和宽度一样,color也提供四个方向的样式,可以分别指定颜色
border-xxx-color设置边框的样式
可选值:
none,默认值,没有边框
solid 实线
dotted,点状边框
dashed,虚线
double,双线
style也可以分别指定四个边的边框样式,规则和width一致,
同时它也提供border-xxx-style四个样式,来分别设置四个边
例:border-style: solid dotted dashed double;
border
边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-xxx可以单独设置四个边的样式,规则和border一样,只不过只对一个边生效
例:border-top: 10px red solid
-
内边距
内边距(padding),指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距,可以通过:
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距内边距会影响盒子的可见框大小,元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right
可见框的高度=border-top-height+padding-top+height+padding-bottom+border-bottom-height设置上内边距
例:padding-top: 100px;
使用padding可以同时设置四个边框的样式,规则和border-width一致
例:padding: 100px 200px 300px 400px;
-
外边距
外边距指的是当前盒子与其他盒子之间的距离
不会影响可见框大小,而是会影响到盒子的位置
盒子有四个方向的外边距:
margin-top
margin-right
margin-bottom
margin-left由于页面中的元素都是靠左靠上摆放的,
所以注意当我们设置上和左外边距时,会导致盒子自身的位置发生改变
而如果是设置右和下外边距会改变其他盒子的位置外边距也可以指定为一个负值
如果外边距设置为负值,则元素会向反方向移动
例:margin-left: -100px;
margin还可以设置为auto,auto一般只设置给水平方向的margin
如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto,则外边距默认就是0如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值
就可以使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
以使子元素在父元素中水平居中
例:margin: 0 auto
外边距同样可以使用简写属性margin,可以同时设置四个方向的外边距
规则和padding一样 -
默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果
所以为很多的元素都设置了一些默认的margin和padding,
而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding通通去掉
清楚浏览器的默认样式:
*{
margin: 0;
padding: 0;
}
-
内联元素的盒子
内联元素不能设置width和height
内联元素可以设置水平方向的内边距
内联元素可以设置垂直方向内边距,但是不会影响页面的布局
内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
内联元素支持水平方向的外边距
内联元素不支持垂直外边距
水平方向的相邻外边距不会重叠,而是求和 -
display
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素设置块元素显示
inline-block:将一个元素转换为行内块元素
可以使一个元素既有行内元素特点又有块元素的特点
即可以设置宽高,又不会独占一行
none:使用该方式隐藏的元素,不会在页面中显示,并且元素不会在页面中继续占有位置
例:display: none;
-
visibility
可以用来设置元素的隐藏和显示的状态
可选值:
visible 默认值,元素默认会在页面显示
hidden 元素会隐藏不显示使用visibility: hidden;隐藏的元素虽然不会在页面中显示,但是它的位置依然保持
例:visibility: hidden;
-
overflow
子元素默认是存在父元素的内容区中,
理论上讲子元素的最大可以等于内容区大小
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示
超出父元素的内容,称为溢出的内容
父元素默认是将溢出内容,在父元素外边显示
通过overflow可以设置父元素如何处理溢出的内容
可选值:
visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置
hidden,溢出的内容,会被修建,不会显示
scroll,会为父元素添加滚动条,通过拖动滚动条来查看完整内容
该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条
auto,会根据需求自动添加滚动条,
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
例:overflow: auto;
-
文档流
文档流处在网页的最底层,他表示的是一个页面中的位置
我们所创建的元素都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行,块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被子元素/内容撑开
内联元素
1.内联元素在文档流中只占自身的大小,会默认从左向右排列
如果一行中不足以容纳所有的内联元素,则换到下一行,
继续自左向右。
2.文档流中,内联元素的宽度和高度默认都被内容撑开当元素的宽度的值为auto时,此时指定内边距不会影响可见框的大小,
而是会自动修改宽度,以适应内边距