CSS盒子模型

列表标签

1.有序列表

开始于<ol>

每个列表项开始于<li>

不设定type属性时默认type为数字序号

<ol>
    <li>A为大写字母序列号</li>
    <li>a为小写字母序列号</li>
    <li>I为I II III序列号</li>
</ol>

2.无序列表

开始于<ul>

每个列表项开始于<li>

不设定type属性时默认type="disc"序号

<ul type="disc">
    <li>disc为实心点</li>
    <li>circle为空心圆</li>
    <li>square为方块符号</li>
</ul>

3.自定义列表

自定义列表不仅仅是一列项目 而是项目及其注释的组合

以<dl>开始

每个自定义列表项以<dt>开始

每个自定义列表项的定义以<dd>开始

<dl>
    <dt>自定义列表项</dt>
    <dd>列表项注释</dd>
</dl>

盒子模型

盒子模型是一个容器 盒子 有宽度有高度的长方形

内部css样式
          1.选择器和一条或者多条生命组成的
          2.所有声明用大括号包裹
          3.每条声明由属性和值组成 属性是固定的 值是可变的 并且属性可以有多个值 每条声明用分号隔开
          4.属性和值用冒号隔开

  	div{width:500px;
  		height:500px;
  		background:blue;
  		/*border三要素 大小 样式风格 颜色*/
  		border:1px solid red;
  		/*solid 实线
  		  dotted 点状线*/
  		border:1px dotted red;
  		/*单独规定上边框线的样式*/
  		border-top:20px solid pink;
  		border-left:20px solid green;
  		border-color:red;
        /*边框颜色
            1.英文单词：red blue
            2.十六进制：#666
            3.rgb/rgba:颜色/透明颜色
        */
  		border-top-style:solid;
  		/*
  			1.无边框 none
  			2.实线 solid
  			3.虚线 dashed
  			4.点状线 dotted
  			5.双线 double
  			6.3d凹槽 groove
  			7.3d垄状 ridge
  			8.3d inset边框 inset
  			9.3d outset边框 outset
  		*/}

外边距margin属性

margin属性接受任何长度单位、百分数值甚至负值

margin:200px;
/*上下左右*/
margin:100px 200px;
/*上下    左右*/
margin:50px 100px 50px;
/*上   左右   下*/
margin:20px 30px 40px 50px;
/*上  右  下  左*/
auto
/*居中*/

内边距padding属性

padding属性接受长度值或者百分比值但不允许使用负值且不能使用auto

在CSS中，width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

盒子模型占位宽

自身宽（width）+左右内边距（padding）+左右边框（border）+左右外边距（margin）

盒子模型占位高

自身高（height）+上下内边距（padding）+上下边框（border）+上下外边距（margin）

 

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

 

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

 

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

 

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

1.

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

 

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始无序列表

2.有序列表

3.定义列表

1.无序列表

2.有序列表

3.定义列表

1.无序列表

2.有序列表

3.定义列

1.无序列表

2.有序列表

3.定义列表