HTMLNo.4

display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。

值	描述
none	此元素不会被显示。但是在网页中是存在的。
block	此元素将显示为块级元素，此元素前后带有换行符
inline	默认。此元素会被显示为内敛元素，元素前后没有换行符
inline-block	行内块元素
list-item	此元素会作为列表显示

浮动

float的属性值有none、left、right。

1、 只有横向浮动，没有纵向浮动
2、会将元素的display属性变更为block
3、浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4、浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须要让两个块状元素都应用float)。

 #d1 {
            width:100px;
            height:100px;
            background-color:purple;
            float:left;
        }
#d2 {
            width:100px;
            height:100px;
            background-color:pink;
            float:left;
        }

<div id="d1"></div>
<div id="d2"></div>

如果两个div里面第一个有float:left,第二个没有，则会显示为只显示第一个，为紫色
如果两个都没有float:left,则上下排列，上紫下粉
如果div里面第一个没有float:left,第二个有，则显示和两个都没有float:left一样

盒子模型

border

1. 可同时设置所有边框的宽度、样式、颜色

table,th,td{
	border:1px solid black;
}
table{
	width:100%;
	height:50px;
}

2. 使用border-width、border-style、border-color单独设置

table, td{
	border-width:1px;
	border-style:dotted;
	border-color:green;
}

3. border-style的属性

4. border-collapse

设置是否将表格边框折叠成单一边框
属性值：separate(默认，单元格边框独立)、collapse(单元格边框合并)

内边距padding

用的很少，为了使元素和边框之间有距离，会使元素变形。所以直接通用选择器设成0px。
若不想影响格式效果，可以用margin设置成元素外边距。
设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性。
顺序为： 上 右 下 左

td {
	padding:1.5cm
}

大度设置各边的内边距：padding-top，padding-left，padding-bottom，padding-right
顺序为： 上 右 下 左

td.test1{
	padding:1.5cm
}
td .test2{
	padding:0.5cm 2.5cm
	/*上下 左右*/
	/*三个的话为 上右下，左的和右一致*/
}

外边距margin

设置一个元素所有的外边距的宽度，或者设置各边上外边距的宽度。

p.margin{
	margin:2px 4px 3px 4px
}

单独设置各边的外边距：margin-top，margin-left,margin-bottom，margin-right

p.margin{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
*{
	margin:auto auto
}
*{
	margin:100px auto
}

说明：
auto：自动，可以理解为居中的意思。浏览器自动计算外边距。
margin：auto auto；第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。
但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态。
若要设置为上下左右居中状态，则要计算好自行设置上下的外边距。

注意：此时使用margin-top不生效。因为使用了position定位。

作业总结

在使用HTML的style属性时，填写的得是HTML里面的属性，别填进去CSS独有的属性了。有的属性是写进HTML和CSS里面都行，有些只有用CSS才可以设置。

块元素默认情况下是最大宽度。即width:100%?

text-transform属性

值	描述
none	默认。定义带有小写字母和大写字母标准的文本
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母
lowercase	定义仅有小写字母，无大写字母

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

white-space 关于文本换行

white-space:

值	描述
normal	默认。空白会被浏览器忽略
pre	空白会被浏览器保留。其行为方式类似HTML中的<pre>标签
nowrap	文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承white-space的值