css拖动样式_css核⼼样式
css核⼼样式
font-weight粗细
作⽤：设置⽂字粗细，是font的单⼀属性。
属性值：有两种类型，（1）单词类型，（2）数字类型。
单词类型：
属性值 | 说明 --- | --- normal | 默认值，标准字体 bold | 粗体，b（没有语义）、Strong（有语义）标签的默认值 bolder | 更粗的字体 lighter | 更细的字体
数字类型：100-900之间的整百数字，数字越⼤，字体越粗。
其中，400等价于normal，700等价于bold。实际100~500都是正常的，600~900都是加粗的。
font-style字体风格
作⽤：设置⽂字是否斜体显⽰，是font的单⼀属性。
属性值 | 说明 --- | --- normal | 正常字体，默认 italic | 设置斜体的⽂字，主要针对英⽂。且带有倾斜属性的字体才能设置倾斜操作。i 标签的默认值。 obique | 倾斜的⽂字，只是将⽂字倾斜显⽰，与字体⽆关。没有倾斜属性的字体也可以设置倾斜操作。（不常⽤，了解即可）
line-height⾏⾼
作⽤：设置的是⼀⾏⽂字实际占有的⾼度，⽂字字号在⾏⾼中是垂直居中的，font的单⼀属性，⽂字有默认⾏⾼。
属性值 | 说明 --- | --- px像素值 | 设置⾏⾼的具体像素值 百分⽐数值 | 参考本⾝字号像素值的百分⽐
量取⾏⾼的步骤：（fireworks⼯具）
确定字体和字号。
根据已知的字号和字体，在书写上下对齐的两⾏⽂字，调整属性⾯板的⾏⾼值，直到两⾏⽂字都对齐。
font字体综合
写法1：两个属性，必须有字号和字体，字号必须在前，字体在后。
写法2：三个属性，字体，字号，⾏⾼。
书写⽅式： 字号/⾏⾼ 字体
写法3：如果需要设置加粗和斜体，这两个属性只能写在最前⾯，两个值之间可以相互换位置。后⾯的字号，⾏⾼，字体不能变换位置。
text-align⽔平对齐
作⽤：设置⽂本⽔平⽅向的对齐⽅式
属性值 | 说明 --- | --- left | 左对齐，默认 right | 右对齐 center | 居中对齐
text-decoration⽂本修饰
作⽤：设置⽂本整体是否有线条的修饰效果。
属性值 | 说明 --- | --- none | 没有修饰，⼤部分标签的默认值 overline | 上划线 line-through | 中划线（删除线），del标签的默认值underline | 下划线，a标签的默认值
text-indent⽂本缩进
作⽤：设置段落⾸⾏是否缩进。
属性值 | 说明 --- | --- px单位 | 表⽰缩进多少像素 em单位 | 缩进⼏个中⽂字符的位置（常⽤） 百分⽐ | 缩进⽂字所在标签的⽗级标签的width属性值得百分⽐
属性值区分正负，正数代表向右缩进，负数代表向左缩进。
盒模型属性
宽度width，⾼度height，边框border，内边距padding，外边距margin。
常见盒模型区域，根据不同属性的效果，可以划分
书写元素内容区域：width+height
盒⼦可以实体化（可以加颜⾊）的区域：width+height+padding+border
盒⼦实际占位的位置：width+height+padding+border+margin
宽度width：
作⽤：设置元素的宽度
属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的宽度。（参考⽗元素） px | 像素值定义的宽度 % | 定义参考⽗元素宽度width的百分⽐宽度 注：body元素⽐较特殊，不需要设置宽度，⾃适应浏览器窗⼝的宽度。
⾼度height：
作⽤：设置元素的⾼度。
属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的⾼度，⾼度会被内容撑开 px | 像素值定义的⾼度 % | 定义参考⽗元素⾼度height的百分⽐⾼度
内边距padding：
作⽤：设置元素内部到宽⾼之间的距离。
特点：可以添加背景，但是不能书写内容。
属性值：常⽤px为单位的数值。
padding是⼀个复合属性，有四个⽅向。顺序为上右下左，顺时针⽅向。
简写（四种）：
四值法：padding: 10px 20px 30px 40px，上，右，下，左。
三值法：padding: 10px 20px 30px，上，左右，下。
⼆值法：padding: 10px 20px，上下，左右。
单值法：padding: 10px，上右下左。
边框border：
作⽤：设置的是内边距外⾯的边界区域，作为合资实体化的最外层。
属性值：由三个值组成，分别为线的宽度，线的形状，线的颜⾊。顺序不是必须的。
复合属性。线宽border-width，线型border-style，边框颜⾊border-color。
线宽border-width，有四值写法。
线型border-style，有四值写法，属性值：none⽆边框，solid实线，dashed虚线（有兼容问题），dotted点线。
边框颜⾊border-color，有四值写法。
按边框⽅向划分：border-top，border-right，border-bottom，border-left。
根据⽅向和类型，进⼀步细分：border-⽅向-类型。顺序不能错。
外边距margin：
作⽤：设置的是盒⼦和盒⼦之间的距离。
特点：不能渲染背景。
属性值：常⽤px为单位的数值。
外边距的设置⽅式与内边距的⽅式同。
盒模型扩展-清除默认样式
作⽤：为避免默认样式对整体布局效果造成影响。
⼤部分容器级标签都有默认边距。
ul和ol列表有默认的列表前缀，需要清除list-style属性。
a标签的默认样式：设置color和text-decoration
h系列标签,b标签，strong标签有加粗效果，设置font-weight。
给body设置整体⽂字样式，让⼤部分后代标签全部去继承。
body {
color: #666;
font-size: 14px;
font-family: Arial,"宋体";
}
盒模型扩展-height应⽤
根据不同的需求，⾼度可以设置，也可以不设置，如果设置了⾼度，盒⼦占有的⾼度位置就定死了，后⾯的同级元素会紧挨着加载，如果不设置⾼度，会根据标签内部内容⾼度⾃动撑开。
必须设置⾼度：设计图中盒⼦⾼度占位是固定的，后⾯同级元素在⾼度下⾯加载。
注：设置⾼度后，如果盒⼦中的内容很多的话，也不会把盒⼦撑开，且盒⼦后⾯的元素位置不变。
overflow属性：对溢出的内容显⽰进⾏设置
属性值| 说明 --- | --- visible | 默认值，溢出的部分显⽰。 hidden | 溢出的部分隐藏，隐藏超过边框范围的内容 scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒⼦⾼度的部分不显⽰，不论有没有溢出，⽔平和垂直⽅向都会出现滚动条 auto |⾃动的，如果没有溢出就正常显⽰，如果有溢出，溢出的⽅向⾃动出现滚动条
html横向滚动条样式必须不设置⾼度：要求盒⼦⾼度必须⾃适应内部内容的⾼度，或者设置height的属性值是⾃动的。
盒模型扩展-居中
⽂本⽔平居中：text-align属性，不论单⾏或多⾏都可以设置。
单⾏⽂本垂直居中：设置⽂字的line-height等于盒⼦的⾼度。
多⾏⽂本垂直居中：让元素⾼度⾃适应或者正好等于多⾏⽂本的⾼度，设置元素内边距上下值相同。
元素垂直居中：让⽗元素⾼度⾃适应，⼦元素⾼度⾃动撑开⽗级的⾼度，再给⽗元素设置相同的上下边距。
元素⽔平居中：⼦盒⼦的宽度低于⽗盒⼦的宽度，可以设置⼦盒⼦的margin值，为margin：0 auto；
原因：auto只在⽔平⽅向有作⽤，⽔平⽅向的margin如果设置为auto，边距会⾃动⽆限增⼤，直到撑满整个⽗元素除了⼦元素之外剩余的区域，如果两个⽔平⽅向都是auto，两边都要⽆限⼤，只能达到⼀个平衡，两边距离相同，导致盒⼦居中。
盒模型扩展-⽗⼦盒模型
⼀般情况下，⼀个⽗元素内部可以放⼀个或者多个⼦元素，⽽且多个⼦元素要排成⼀⾏显⽰，必须保证⽗元素的宽度⼀定要⾜够（不考虑溢出情况），需要循环⼀个设置尺⼨的规律：所以⼦元素的宽度加在⼀起不能⼤于⽗元素的宽度width。
⽗元素的width >= 所有⼦元素width + padding + border + margin
如果不满⾜条件：要么多余的⼦元素掉下来不能在⼀排，要么溢出⽗元素。
特殊情况：盒模型⾃动内减（只针对width）
⽗⼦盒模型中，只有⼀个⼦元素，且⼦元素是类似div标签必须占⼀⾏的。不设置⼦元素的width属性，⼦元素的width属性值会⾃动加载⽗级元素的width。
如果同时设置了⼦元素⽔平⽅向的padding和border、margin，不需要⼿动去进⾏内减，⼦元素的width会⾃动收缩尺⼨。
⼦元素所有⽔平⽅向的属性值加和等于⽗元素的宽度。
盒模型扩展-margin塌陷现象
margin塌陷现象：在垂直⽅向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值⽐较⼤的，边距⼩的塌陷到了边距值⼤的值内部。
同级元素塌陷：上⾯的元素有下边距，下⾯的元素有上边距，两个边距相遇，真正盒⼦间距离是较⼤的那个值。
⽗⼦元素塌陷（margin-top传递问题）：⽗⼦元素之间也会出现margin塌陷，（1）⽗元素和⼦元素都设置了同⽅向的margin-top 值，两个属性之间没有其他内容进⾏隔离，导致两个属性相遇，发⽣margin塌陷。（2）本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级元素⼀起掉下来（⽗元素的上边距0塌陷到了⼦元素的上边距30⾥⾯）。
解决办法：
同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。
⽗⼦元素：让两个边距不要相遇，中间可以使⽤⽗元素border或padding将边距分隔开；更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼦元素的margin去设置，⽽是⽤⽗元素的padding挤出来。
注：⽔平⽅向没有margin塌陷。
标准⽂档流
标准⽂档流，指的是元素排版布局过程中，元素会默认⾃动从左往右，从上往下的流式排列⽅式。前⾯内容发⽣了变化，后⾯的内容位置也会随着发⽣变化。
html就是⼀种标准⽂档流⽂件。
HTML中的标准⽂档流特点通过两种⽅式体现：微观现象和元素等级。
微观现象：（1）空⽩折叠现象。（2）⽂字类的元素如果排在⼀⾏会出现⼀种⾼低不齐、底边对齐效果。（3）⾃动换⾏，元素内⼀⾏内容写满元素的width时会⾃动进⾏换⾏。
元素等级：在标准流中，⼤部分元素是区分等级的，习惯将元素划分为⼏种常见的加载级别：块级元素，⾏内元素，⾏内块元素。
块级元素：a、块级元素可以设置宽⾼，在浏览器中正常加载。b、块级元素必须独占⼀⾏，不能与其他任何标签并排⼀⾏。c、块级元素如果不设置width，会⾃动撑满⽗级的width区域；⾼度height不设置，会被内容⾃动撑开⾼度。
⾏内元素： a、⾏内元素不能设置宽度和⾼度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题，b、⾏内元素可以与其他的⾏内或⾏内块元素并排显⽰。c、⾏内元素不论是否设置宽⾼，宽⾼只能被内容⾃动撑开。
⾏内块元素：a、可以设置宽度和⾼度。b、可以与其他的⾏内或⾏内块并排显⽰。c、如果不设置宽⾼，要么以原始尺⼨加载，要么被内容⾃动撑开。d、具有标准流的微观性质，例如空⽩折叠现象。
显⽰模式-display
标准流中的元素有⾃⼰默认的浏览器加载模式，但是加载模式不是⼀成不变的，后期可以通过display属性改变⼀个标签的显⽰模式。
属性值 | 作⽤ --- | --- block | 以块级元素模式加载，具备块级特点 inline | 以⾏内元素模式加载，具备⾏内特点 inline-block | 以⾏内块模式加载，具备⾏内块特点 none | 直接隐藏，不占标准⽂档流的位置
脱离⽂档流：display属性改变的显⽰模式并没有改变标准流本质性质，页⾯还是只能从上往下加载，存在空⽩折叠现象等微观性质。
要想实现更多的页⾯布局效果需要脱离标准流的限制。元素脱离标准⽂档流的⽅法包括：浮动、绝对定位、固定定位。
浮动
定义：⼀种⾮常重要的布局属性。
属性值：left--左浮动，right--右浮动。
作⽤：让元素脱离标准流，同⼀级的浮动元素可以并排显⽰。
性质：
（1）浮动的元素脱离标准流。
标准⽂档流特点：区分⾏块。
浮动的元素脱离了标准流的限制，具备⾏块⼆象性，浮动的元素可以设置宽⾼，还可以并排显⽰，且不会有空⽩折叠现象，如果元素不设置宽⾼，可以被元素内容⾃动撑开。
（2）浮动的元素依次贴边。 （3）浮动的元素没有margin塌陷。
margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不在具有margin塌陷现象。 （4）浮动的元素会让出标准流的位置元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后⾯的⼀个
同级元素。
压盖效果（字围现象），ie6、ie7会出现兼容问题，所以⼀般不会使⽤这种⽅法，⼀般使⽤定位制作。
如果没有特殊需求，不允许⼀个⽗元素的⼦元素有的浮动，有的不浮动，同级元素中有⼀个浮动其他的也要浮动。
浮动问题：
问题1：标准流中的元素，不设置⾼度的情况下，都能被内部的标准流元素⾃动撑⾼。如果内部的⼦元素进⾏了浮动，浮动的⼦元素是撑不⾼标准流⽗亲的。
问题2：⽗元素没有⾼度，会影响后⾯元素的标准流位置，如果浮动的⼦元素⾜够⾼时，有可能影响到后⾯浮动元素的贴边。
清除浮动
清除浮动1：给标准流的⽗元素强制⼀个合适的⾼度。
解决：⽗元素有⾼度了，前⾯的浮动不能影响后⾯元素的标准流位置和贴边。
问题：⽗元素⾼度不是⾃适应，⼀旦⼦元素⾼度变化，问题可能再次出现。
清除浮动2：clear属性
给标准流⽗元素添加clear属性，⽗元素不受前⾯浮动影响，不会再占有浮动让出的位置。
属性值 | 说明 --- | --- left | 清除前⾯左浮动带来的影响 right | 清除前⾯右浮动带来的影响 both | 清除前⾯所以浮动带来的影响解决：浮动元素影响后⾯元素标准流位置和贴边
问题：⽗元素不能⾼度⾃适应，两个⽗元素之前如果有margin效果不正确。
清除浮动3：隔墙法
外墙法：在两个⼤的⽗盒⼦之间，添加⼀个空的div标签，标签上带有clear：both属性。
解决：浮动影响后⾯元素标准流位置和贴边，模拟⽗元素间的距离。
问题：⽗元素没有⾼度⾃适应。
内墙法：在⽗元素内部，所以浮动的⼦元素后⾯添加⼀个空的div元素，标签⾼度为0，添加clear属性。
解决：⽗元素⾼度⾃适应，浮动影响后⾯的元素位置和贴边。
缺点：浮动是css样式属性带来的问题，内墙法使⽤html结构去辅助解决问题，如果页⾯中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。