第六章 盒子模型
Posted tongchaofei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第六章 盒子模型相关的知识,希望对你有一定的参考价值。
一.边框样式:
1.border-color:边框颜色
1.1 border-top-color:上线颜色
1.2 border-bottom-color:下线颜色
.................................
1.3 border-color:颜色1 所有边框
1.4 border-color:颜色1 颜色2 上下为颜色1 左右为颜色2
1.5 border-color:颜色1 颜色2 颜色3 上为颜色1 左右为颜色2 下为颜色3
1.6 border-color:颜色1 颜色2 颜色3 颜色4 上右下左
2.border-width:指定的是边框的粗细
2.1 thin细
2.2 medium中等
2.3 thick粗
2.4 像素xxxpx
3.border-style:指定边框风格
3.1 none:默认
3.2 hidden:隐藏
3.3 dotted:圆点
3.4 dashed:虚线
3.5 solid:实线
3.6 double:双实线
4.border: 边框线宽度 颜色 边框风格
4.1 border:1px purple solid;
二.外边距
margin:外边距,盒子与盒子
margin-top:上外边距
margin-right:下外边距
margin-bottom
margin-left
margin:0px auto; 网页居中对齐的必要条件 1.块元素 2.固定宽度
三.内边距
padding:内边距,内容与盒子
padding-left :左内边距
padding-right
padding-top
padding-bottom
padding:位置1 位置2 上下为位置一 左右为位置二
四.盒子模型尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing:content-box | border-box | inherit;
content-box:默认值,盒子的宽度或者高度=border+padding+(margin)+width/height
border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
inherit:元素集成父元素的盒子模型模式
五.圆角
border-radius:圆角
border-radius:20px 10px 50px 30px; 四个属性值按顺时针排列
1.border-color:边框颜色
1.1 border-top-color:上线颜色
1.2 border-bottom-color:下线颜色
.................................
1.3 border-color:颜色1 所有边框
1.4 border-color:颜色1 颜色2 上下为颜色1 左右为颜色2
1.5 border-color:颜色1 颜色2 颜色3 上为颜色1 左右为颜色2 下为颜色3
1.6 border-color:颜色1 颜色2 颜色3 颜色4 上右下左
2.border-width:指定的是边框的粗细
2.1 thin细
2.2 medium中等
2.3 thick粗
2.4 像素xxxpx
3.border-style:指定边框风格
3.1 none:默认
3.2 hidden:隐藏
3.3 dotted:圆点
3.4 dashed:虚线
3.5 solid:实线
3.6 double:双实线
4.border: 边框线宽度 颜色 边框风格
4.1 border:1px purple solid;
二.外边距
margin:外边距,盒子与盒子
margin-top:上外边距
margin-right:下外边距
margin-bottom
margin-left
margin:0px auto; 网页居中对齐的必要条件 1.块元素 2.固定宽度
三.内边距
padding:内边距,内容与盒子
padding-left :左内边距
padding-right
padding-top
padding-bottom
padding:位置1 位置2 上下为位置一 左右为位置二
四.盒子模型尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing:content-box | border-box | inherit;
content-box:默认值,盒子的宽度或者高度=border+padding+(margin)+width/height
border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
inherit:元素集成父元素的盒子模型模式
五.圆角
border-radius:圆角
border-radius:20px 10px 50px 30px; 四个属性值按顺时针排列
1.原形:
border-radius: 50%; 宽度和高度相同
2.半圆:
border-radius: 150px 150px 0px 0px; 两个角变,两个角不变,按照顺序,上半圆和下半圆宽度是高度的二倍,左半圆和右半圆高度是宽度的二倍
3.四分之一圆:
border-radius: 0px 0px 150px 0px; 一个角变,按照顺序,宽度和高度相同
六.盒子阴影
box-shadow:10px 10px 30px yellow;
inset:内阴影
border-radius: 50%; 宽度和高度相同
2.半圆:
border-radius: 150px 150px 0px 0px; 两个角变,两个角不变,按照顺序,上半圆和下半圆宽度是高度的二倍,左半圆和右半圆高度是宽度的二倍
3.四分之一圆:
border-radius: 0px 0px 150px 0px; 一个角变,按照顺序,宽度和高度相同
六.盒子阴影
box-shadow:10px 10px 30px yellow;
inset:内阴影
以上是关于第六章 盒子模型的主要内容,如果未能解决你的问题,请参考以下文章