CSS内联样式盒模型

内联元素的盒子

内联元素不能设置width和height(没用）

可以设置水平方向的内边距。

可以设置垂直方向的内边距，但是不会影响页面的布局。

可以设置边框，但是垂直方向的边框不会影响布局。

支持水平方向的外边距（水平方向的不会重叠，会求和），不支持垂直方向的外边距。

 

.s1{
				width:200px;
				height: 200px;
				/*padding-left: 50px;
				padding-bottom: 50px;*/
				border: 2px gold solid;
				margin: 10px 20px 30px 40px ;
			}

 

display可以修改元素的类型

可选值：

inline：可以将一个元素作为内联元素显示

block ：设置为块元素

inline-block：将一个元素转换为行内块元素--可以使一个元素，既有行内元素特点又有块元素特点。即可以设置宽高，又不会独占一行

none：不显示元素，并且元素不会在页面中继续占有位置。

visibility：元素是否可见

可选值：

默认值 visibility

hidden 不会在页面中显示，但是位置依然保持

.s1{
				width:200px;
				height: 200px;
				/*padding-left: 50px;
				padding-bottom: 50px;*/
				border: 2px gold solid;
				margin: 10px 20px 30px 40px ;
				display: none;
			}

overflow设置父元素如何处理溢出的内容

子元素默认存在父元素的内容区，子元素的大小可以=内容区的大小，如果子元素的大小超过了父元素内容区，则超过的大小会在父元素以外的地方显示。---（溢出的内容）

父元素默认是将溢出内容在外面显示。

可选值：

visible可见   默认

hidden  一剪没（溢出的内容会被修剪）

scroll   内容会被修剪但是可以滚动查看内容---》（不论内容是否溢出，都会添加水平和垂直方向的滚动条）

auto   会根据需求自动添加滚动条

overflow：auto；