盒子模型 div

每个HTML元素都可以看作一个装了东西的盒子：

width 内容宽度 height 内容高度

border 边框

padding 内间距 内容和边框之间的距离

margin 外间距 两个盒子之间的距离

        两个标记同时设置了上下外边距 边距=较大边距值
                两个标记同时设置了左右方向的外边距 边距=两个边距之和 

(如果div1的下外边距为10 它下面的div2的上外边距为30 那么他们两个之间的距离为30)

                通过设置外边距可以让某个盒子在他的父标记中整体居中
                margin: 0 auto;

盒子尺寸计算: 所有纵向或者横向的值相加

        .d3{
				width: 200px;
				border: 1px solid #A69EC1;
				padding-left: 15px;
				margin: 30px;
				/* 200+1*2+15+30*2 */
			}

标记默认样式 

常用元素默认样式：

1. 标签的margin为8px
2. p标签的上下外边距为16pxh
3. 1标签的上下外边距为21.440px
4. ul标签的上下外边距也为16px，左内边距也为40px

CSS重置

 在实际开发中，为了兼容性，也为了开发者更好的设置自己想要的样式，那么凡是浏览默认的样式，都不会使用，这就是CSS重置。

/********************** 这是一个最简单的CSS重置 **********************/
body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,span,a,img,form{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

标记分类

1.行级标记

行级标记 最大特点 可以和同类型标记共处一行 
行级标记 不能设置宽度和高度 它的宽度高度由内容撑开
行级标记里面最常用的标记是span  可以设置边框 内边距 以及左右外边距

<b>加粗</b><i>斜体</i><span>行标记</span>

2. 块级标记

块级标记 最大特点 独占一行显示 
块级标记可以设width和height   如果不设置width 默认是占满这一行 如果不设置height 默认由内容撑开
 块级标记 支持所有的盒子模型样式属性
块级里面最常用的标记是div 常常把div当做是一个容器 区域 header nav section aside

        <div>
			div
			<br>div
		</div>
		<p>段落</p>

3.行内块标记

行内块标记 两大特点
1.可以和同类型标记以及行级标记共处一行显示
2.支持所有的盒子模型样式属性

        <img src="bg.jpeg" >
		<input />
		<button>按钮</button>

display属性

display : none 隐藏

display : block变成块级标记

display : inline变成行内标记

display : inline-block变成行内块标记

        span{
				border: 1px solid red;
				width: 200px;
				height:200px;
				padding-left: 10px;
				padding-bottom: 10px;
				margin-left: 40px;
				margin-top: 100px;
				/* display none 隐藏 block变成块级标记 inline变成行内标记 inline-block变成行内块标记 */
				display: block;
			}

内容溢出处理

 overflow

overflow : auto 会给区域一个滑动条 为了溢出内容可以放进区域里

overflow : hidden内容溢出时多余内容减掉

word-break: break-all 自动折行 内容溢出时自动换行

        div{
				width: 100px;
				border: 1px solid red;
				/* overflow auto会有一个滑动条 hidden内容溢出时多余内容减掉 */
				/* overflow: auto; */
				/* 自动折行 内容溢出时自动换行 */
				word-break: break-all
				
			}

边框盒子  box-sizing: border-box

如果是边框盒子 那么width就代表整体尺寸(不用加内外边距边框距离)

        div{
				box-sizing: border-box;
				width: 300px;
				/* 如果是边框盒子 那么width就代表整体尺寸 */
				border: 1px solid red;
				padding: 50px;
				margin: 20px;
				/* 宽度为300px */
			}