content 内容区
元素中所有子元素和文本内容都在内容区排列
内容区大小由width和height属性设置
width 设置宽度
height 设置高度
padding 内边距
共有四个方向的内边距:
padding-top、right、bottom、left
内边距会影响盒子大小,背景颜色会延伸到内边距上
盒子的可见框总大小 由内容区、内边距和边框共同决定
padding 内边距简写属性,可以同时指定四个方向的内边距,和border-width一样
border 边框
属于盒子边缘,边框里属于盒子内部,边框外都是盒子外部
设置边框,至少设置三个样式:(三个缺一不可)
-
宽度 border-width (默认3px)
border-width:10px 20px 30px 40px
上 右 下 左
四个参数:还可以规定各个边的宽度
border-width:10px 20px 30px
三个参数: 上 中 下
border-width:10px 20px
两个参数 : 上下 左右
-
颜色 border-color
用来改变颜色,也可以分别指定四个颜色
border-color: red red red red
-
样式 border-style
border-width:10px; border-color:red; border-style:solid;//实线
none 无边框(默认)
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
依然可以分别设置四个边框格式
边框会影响盒子大小 边框10px,如果盒子高度200px,则总共高度220px
可以直接border 简写属性
border:solid 10px orange
参数顺序可以调换
margin 外边距
外边距不会影响盒子可见框大小,影响盒子的位置
一共有四个方向的外边距 margin-top、right、bottom、left
例:
margin-top :100px;//上外边距,设置一个正值,元素会向下移动
margin也可以设置负值,如果为负,则会往相反的方向走
margin简写属性
margin:100px (一个参数、两个参数、三个参数、四个参数都可以)
margin会影响盒子实际占用的空间
水平布局
元素在其父元素水平方向的位置由以下属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
width、margin-left、margin-right可以设置为auto
如果宽度和外边距设置为auto,则宽度会调整到最大,外边距为0
如果将三个值都设为auto,则外边距都是0,宽度最大
如果两个外边距设为auto,宽度固定,则会将外边距设置会相同的值
所以可以利用这个特点 使一个元素在父元素中水平居中
width:100px;
margin:0 auto;//0表示上下边距0,左右auto自动水平居中
垂直布局
溢出
如果父元素不设置高度,默认情况父元素高度会被内容撑开,写上不会撑开。
子元素在父元素内容与排列,如果高度大于父元素,会超出,撑破盒子。
可以在父元素设置overflow属性处理溢出的子元素,可选值:
visible
默认值 子元素会从父元素溢出,在父元素外部的位置显示hidden
溢出内容将会被裁剪 不会显示scroll
生成两个滚动条,通过滚动条来查看完整的内容auto
根据需要生成滚动条
overflow-x
:单独处理水平方向溢出
overflow-y
:单独处理垂直方向溢出
外边距的折叠
上元素的margin-bottom:
100px
下元素的margin-top:
100px
俩元素之间距离仍是100px
相邻的垂直方向外边距会发生重叠现象
兄弟元素间
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
特殊情况:相邻外边距一正一负,则距离取两者和
相邻外边距两个都是负值,取绝对值较大的
兄弟元素之间的外边距充电,对于开发是有利的,不需要处理
父子元素
父子元素之间相邻外边距,子元素的会传给父元素(上外边距)
父子外边距的折叠会影响到页面布局,必须处理
临时解决方案:
通过父元素padding-top来代替margin效果
通过给父元素添加边框,使父子元素的外边距不相邻
行内元素盒模型
行内元素不支持设置宽度和高度,(不能通过宽高设置内容区大小,只能通过内容)
行内元素可以设置padding,但是垂直方向padding不会影响页面布局(不会挤走别人,但有可能覆盖)
行内元素可以设置border,垂直方向的border不会影响布局
行内元素可以设置margin,垂直方向margin不会影响布局
a中的超链接属于行内元素
display
用来设置元素显示类型
-
inline
设置为行内元素 -
block
设置为块元素 -
inline-block
设置会行内块元素 既可以设置宽高又不会独占一行
行内块元素之间会有空隙
-
table
将元素设置为一个表格 -
none
元素不在页面显示
visibility
用来设置元素的显示状态
visible
默认值 元素在页面中正常显示hidden
元素在页面中隐藏 不显示 占据位置
浏览器默认样式
通常情况下,浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局,通常情况下编写网页必须去除掉浏览器的默认样式(PC端的页面)
F12可以查看元素
默认样式在父元素body里
简单方法
"较麻烦"///
body{
margin: 0px;
}
p{
margin:0px;
}
ul{
margin:0;
padding:0;
margin-left:20px;//不然会藏起来,设置left可以调出
list-style:none;//去除项目符号
}
/最简单方法,有残留 不完美
*{
margin:0;
padding:0;
}
重置样式表–最完美
<link rel="stylesheet" href="./moren.css">
-
normalize.css
对默认样式做了统一
2.reset.css
(moren.css)
直接去除了浏览器的默认样式
盒子的大小
默认情况,盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing
用来设置盒子尺寸的计算方式(设置width和height的作用)
-
content-box
默认值,宽度高度用来设置内容区的大小 -
border-box
宽度和高度用来设置整个盒子可见框的大小width
和height
指的是内容区和内边距和边框的总大小
轮廓阴影和圆角
阴影
outline
用来设置元素的轮廓线,用法和border
一模一样
轮廓和边框不同的点,就是轮廓不会影响可见框的大小,有可能会挡住其他元素
box-shadow
用来设置元素的阴影销过,也不会影响页面布局
默认阴影在元素重合正下方
box-shadow:Apx Bpx Cpx color
-
Apx值影响阴影的水平位置(正值阴影向右移动,负值相反)
-
Bpx值影响阴影的垂直位置(正值向下移动,负值相反)
-
Cpx 值阴影的模糊半径
-
color 阴影的颜色
圆角
border-radius
用来设置圆角,圆角设置圆的半径大小
border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
、border-bottom-left-radius
可以设置两个参数
- 一个参数,正圆,代表半径
- 两个参数,椭圆,代表各个半径
border-radius
可以费别指定四个角的圆角
- 四个值: 左上 右上 右下 左下
- 三个值 左上 右上/左下 右下
- 两个值 左上/右下 右上/左下
- 50%圆形