css 强制换行_有关于CSS核心样式的详解以及关于HTML5和CSS3的新属性浅谈

CSS核心样式

font-weight:

作用：设置文字是否加粗显示。
属性名：font-weight，属于font属性的一个单一属性。
属性值方式：单词类型，数字类型。
单词类型：(常用)
normal 默认值，定义标准字体
bold:定义粗体字符，b,strong标签的默认值。
数字类型：100-900之间的整百数字，数字越大，文字显示越粗，其中400等价于normal，700等价于bold。

字体风格font-style

设置文字是否斜体显示。属性名：font-style,属于font属性的一个单一属性。
属性值：单词。
normal:设置正规字体，大多数标签的默认值。
italic:设置倾斜字体，主要针对英文，要求英文以字体符号的斜体样式显示。
oblique：设置倾斜的文字，只是将文字倾斜，与字体无关。

行高：line-height

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名：line-height，属于font属性的一个单一属性。
属性值：
px像素值 ：设置的行高的具体像素值
百分比数值：设置的本身字号像素值得的百分比。
Fireworks软件：Fireworks软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字旳像素点清晰显示。
量取行高的步骤：
第一步：确定文字旳字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作室，设置一个与内容文字颜色差异较大的字体颜色。
第二步：根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高单位为像素，更改数值大小，直到两行文字对齐，得到的就是我们需要的行高值。

font综合属性：

字体，字号，行高，加粗，斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分割隔。
写法1：必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
写法2：font属性经常对字体，字号，行高进行合写，书写顺序必须是字号，行高，字体并且字号和行高之间必须用/进行分隔。
写法3：如果需要设置加粗和斜体两个属性值只能写在最前面，两个值之间可以互换位置后面的字体，行高，字体不能更改位置。

text-align属性：

作用：设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词。(大部分标签默认左对齐)

文本修饰text-decoration:

属性值：none 没有修饰，大部分标签的默认值
overline:上划线
line-through:中划线，删除线，del标签的默认值underline:下划线，a标签的默认值。

缩进text-indent:

作用：设置段落首行是否进行缩进。
属性值：
px单位 表示缩多少像素
em单位：首行缩进几个中文字符的位置。(常用)
百分比：表示缩进文字所在标签的父级标签的width属性值的百分比。

盒模型：

常见盒模型区域：

书写元素内容区域：width+height
盒子实体化区域：width+height+padding+border
盒子实际占位区域：width+height+padding+border+margin

盒模型宽度width:

作用：设置可以添加元素内容的区域宽度。
属性值：
auto ：默认值。
px ：像素值定义宽度
% ：定义参考父元素宽度width的百分比像素

高度height:

作用：设置可以添加元素内容的区域的高度。
属性值：同上。

内边距padding:

作用：设置的是元素边框内部到宽高区域总之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位数值、
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
简写(空格隔开)：
1.四值法：上右下左(顺时针方向)

padding:10px 20px 30px 40px;

2.三值法：上(左右)下
3.二值法：(上下)(左右)
4.单值法：(上右下左)

边框border:

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
属性值：由三个值组成，分为线的宽度，线的形状，线的颜色。
border属性是复合属性，根据划分依据不同可以有两种单一属性的划分方式。
按照属性值的类型划分：
线宽border-width:
作用：设置边框线的宽度。
属性值：常用px形式的数值，四个方向都有边框类似于padding,也有四种值写法。
线型border-style:
作用：设置边框的线条形状。
属性值：形状的单词，总体也是类似于padding的综合属性写法。
属性值单词(重要)：none,solid(实线)，dashed(虚线)
边框颜色border-color:
作用：设置边框颜色。
属性：同上。
根据边框的方向划分：同padding(如border-bottom: 10px solid red )

外边距margin:

作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用px为单位的数值。

盒模型扩展：

清楚默认样式：

盒子模型属性中内外边距：大部分容器及级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符清除。
ul和ol两种列表有默认的列表前缀：清除list-style属性(属性值none)。
a标签的默认样式，顺便设置页面中常用的a标签的公共样式：设置color和text-decoration。
清除默认加粗效果，设置font-weight。

height的应用：

溢出属性：overflow
属性值：
visible 默认值，可见的，溢出部分显示。
hidden 溢出部分直接隐藏，隐藏超过边框范围的内容。
scroll 溢出部分出现滚动条，多出盒子高度的部分不显示，不论有没有溢出，水平方向和垂直方向都会出现滚动条。
auto: 自动，没有溢出就显示正常如果有溢出，溢出方向自动出现滚动条。

居中：

文本水平居中：
水平居中：text-align:center
单行垂直居中：行高等于盒子高度(line-height)
多行文本垂直居中：让元素高度自适应或者正好等于多行文字旳高度，设置元素内边距上下值相同。
元素垂直居中：一个元素内部嵌套的子元素，父元素中居中。
垂直居中：和多行文字相似。
元素水平居中：给子盒子设置margin的值，水平自动。(父盒子宽度大于子盒子)

父子盒模型：

一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素宽度一定要足够。规律：所有子元素的宽度加在一起不能大于父元素的宽度。
特殊情况：盒模型自动内减
父子盒模型组中，只有一个子元素是类似

标签必须占一行的。不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。

margin塌陷现象：

在垂直方向如果有两个元素外边距存在相遇现象，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值打的值内部(也就是两个边距发生了重叠现象，浏览器加载的只有值比较大的间距)
父子元素塌陷：即父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致了两个属性相遇，发生margin塌陷。
解决办法：
1.同级元素：只设置给一个元素，不需要拆分
2.父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；常用方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来。

标准文档流

指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式，前面内容发生了变化，后面的内容位置也会随着发生变化。HTML标准文档流特点：微观现象和元素等级。
微观现象：
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高地=低不齐，底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会进行自动换行
元素等级：块级元素，行内元素，行内块元素等等。
块级元素：大部分容器级标签包括p标签都是块级元素。
a.可以设置宽高，在浏览器中正常加载。
b.独占一行。
c.如果不设置宽高则会被撑开。
行内元素：大部分的文本级标签如span，a,b标签等。
a。无法加载正常宽高
b.可以与其他行内或者行内块元素并排一行显示。
c.行内元素不论是否设置宽高，都只能被内容自动撑开。
行内块元素：如img,input标签。
a.可以设置宽高。
b.可以和其他行内或行内块并排显示。
c.如果不设置宽高内容会被自动撑开。
d具有标准流微观性质如空白折叠现象。

显示属性display

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式特点
block 表示元素要以块级元素模式加载，具备块级特点
inline 表示意行内模式加载，具备行内模式
inline-block 表示标签要以行内块模式加载，具备行内块特点
none 表示标签及内部内容直接隐藏，让出原有标准流的位置
标签元素脱离标准流的方法：浮动，绝对定位，固定定位。

浮动定义

属性名：float
属性值：left right
作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

浮动性质：

1.浮动元素脱离 标准流。
可以设置宽高，可以排成一排而且没有空白折叠现象，如果不设置宽高则会被撑开。
2.浮动元素依次贴边:
浮动方向设置不同，进行布局时，加载方向不同。
3.浮动元素没有margin塌陷，字围现象。

浮动属性：

清除浮动1：height
给标准流的父元素强制给一个合适的高度。
清除浮动2：clear属性
作用；清除标签元素自身受到的前面的浮动元素的影响。
属性值：left right both
给标准父元素添加此属性父元素不受前面浮动的影响。
清除浮动3：隔墙法
外墙法;在两个大的父盒子之间，添加一个空的div标签，标签上带有clear;both属性。
内墙法：在父元素内部，所有浮动子元素后面添加一个空的div元素，标签高为0，添加clear属性。
清除浮动4：
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after :这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通话选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
清除浮动5：溢出隐藏
小偏方：给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden；属性，可以解决浮动所有问题。

a标签的伪类选择器：

普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器上。
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写伪类时必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即添加到浏览器上，只有用户触发了对应的行为，伪类才会立即加载。
a标签的伪类分为四种：访问前link,访问后visited,鼠标移上hover,鼠标点击active

背景属性

1.背景颜色background-color
2.背景图片background-image
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始。
属性值：url(图片路径)
3.背景重复background-repeat：
属性值：
repeat 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
no-repeat 不重复，只加载一次
repeat-x:水平重复，使背景图片水平重复加载铺满第一行，垂直不重复
repeat-y:同上，垂直重复。
4.背景定位background-position
作用：设置不重复的图片在背景区域的加载开始位置。
属性值：三种写法单词表示法，像素表示法，百分比表示法，每种两个属性值，用空格分隔
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片垂直方向上的位置
单词表示法：
水平：left,center,right.
垂直：top,center,bottom
像素表示法：
第一个属性值：像素是几，表示背景图片左上角对border以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角对border以内的左上顶点垂直方向位移的距离。
像素正数：表示图片针对盒子的原点向右向下移动
负数：表示图片针对盒子的原点向左向上移动。
5.背景附着background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值：
scroll 滚动的，表示背景图片与盒子保持相对位置不变。
fixd:固定的

综合写法background

属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序，五个属性值可以互换位置。
注意事项：
1.如果有的属性值没有设置则会按照默认值进行加载。
2.如果要层叠综合属性的一部分，其他属性保持不变，最好使用单一属性写法进行层叠。

css3新增背景属性

背景半透明：Css3支持背景半透明的写法，颜色值增加1一种rgba模式
Rgba模式“在rgb基础上增加了一个不透明的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。
背景缩放bnackground-size：
属性值：
px 1-2个像素值
百分比：同上
cover:自动调整缩放比例把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，如有溢出部分则被隐藏
contain:自动调整缩放比例把背景图像扩展至最大尺寸，保证图片始终完整显示在背景区域。
多背景：
css3中规定，一个盒子可以添加多个背景图片。
background-image的属性值书写时以逗号分隔多背景的URL路径地址。
注意：背景加载时，先写的背景压盖住后写的背景图片。

CSS定位：

定位属性position

属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
偏移量属性；
水平方向：left right
垂直方向：top bottom
属性值：常用px为单位的数值或者百分比。

相对定位relative

参考元素：标签加载的原始位置。
注意事项：
1.偏移量正数：表示便偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。
2.同一个方向不能设置两个偏移量属性。
3。left的正值等于right的负值，垂直方向一样。

绝对定位

属性值：absolution
参考元素：参考的是距离最近的有定位的祖先元素，如果连祖先都没有定位，参考body标签。同相对定位必须搭配偏移量才会发生位置移动。
性质：绝对定位的·元素脱离标准流，会让出标准流位置，可以设置宽高，可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意1：参考元素不固定。
注意2：在绝对定位中，由于参考点不同，left正值不再等价于right的负值。

以body为参考元素时
第一：如果有top参与 定位时，参考点就是左上或者右上顶点。自身
的对比点是盒子的所有盒模型属性最外面的左上角或者右上角。
第二：如果有buttom参与绝对定位时，参考点是body页面首屏的左下或者右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或者右下角。

绝对定位2

如果祖先级中有定位元素，就不会去参考body
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
三种定位组合方式：子绝父相(常用)，子绝父绝，子绝父固
祖先元素参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。
left,top:参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角。

固定定位

属性值；fixed，固定的意思。
参考元素：浏览器窗口。
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。

居中

第一步；设置对应方向
第二步：给绝对定位的盒子设置一个同方向的margin，例如margin-left，属性值为自身宽度的一半

定位压盖顺序：

默认压盖顺序；
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在HTML中后写定位会压盖先写的定位。
自定义压盖顺序：
如果想更改定位的压盖顺序，可以设置一个z-index属性。
属性值：数字
注意事项：
1.属性值大的会压盖属性值小的
2.如果属性值相同，比较书写顺序。
3.z-index属性只能设置给定位的元素才能生效
4.父子盒模型，如果父子盒都进行了定位，与其他的父子级有压盖的部分。
父级盒子：如果不设置z-index，后写的压盖先写的，如果设置了z-index，值大的压盖值小的。
子级盒子；如果父级没有设置z-index属性，子级属性值大的会压盖小的，如果父级设置了z-index值，无论子级值多少，都是父级的值大的子级压盖父级值小的子级，俗称：从父效应。

HTML5知识

HTML5新变化：

HTML5设计目的是为了在移动设备上支持多媒体。
增加新特性：语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维，图形及特效特性，CSS3特性。
废弃的属性：font,center等。
优势：
1.提高了可用性和改进用户的友好体验
2.更好的语义化标签
3.可以给站点标签带来更多的多媒体元素。
4.可以很好地替代FLASH和Silverlight
5.当涉及到网站抓取和索引的时候对于SEO很友好。
6.将被大量应用于移动应用程序和游戏。
7.可移植性好。
劣势：
1.该标准没有很好的被PC端浏览器所支持。
2.IE9以下的浏览器几乎都不兼容。

新增语义化标签

header:头部标签
nav:导航标签
main:主体标签
article:独立的内容标签
setion:区段标签
aside:侧栏标签
footer:尾部标签

新增多媒体标签

音频：audio标签

常见属性：

 兼容写法：

视频：video标签