CSS笔记（续）

选择器优先级每个选择器都可计算权重格式为abca ID选择器的个数b 类伪类属性 选择器的个数c 元素伪元素选择器的个数比较规则从左到右依次比较大小行内样式权重大于所有选择器important的权重大于行内样式大于所有选择器权重最高CSS三大特性层叠性如果发生样式冲突根据选择器优先级进行层叠覆盖冲突元素的同一个样式名被设置了不同的值继承性概念元素自动拥有其父元素或祖先元素上所设置的某些样式规则优先继承离的近的常见可继承属性text font line color优先级important 行内样式 ID选择器类选择器元素选择器*继承并集选择器是分开算颜色十六进制颜色其组成部分是RRGGBB其中 RR红色GG绿色和 BB蓝色。所有值必须介于 0 和 FF 之间。p { background-color:#ff0000; }rgb颜色颜色值指定RGB红绿蓝。每个参数红色绿色和蓝色定义颜色的亮度可在 0 和 255 之间或一个百分比值从0到100之间的整数。p { background-color:rgb(255,0,0); }rgba颜色颜色值指定RGBA红绿蓝alpha。 Alpha 参数是一个介于 0.0完全透明和 1.0完全不透明之间的参数。p { background-color:rgba(255,0,0,0.5); }hsl颜色颜色值指定HSL色调饱和度明度p { background-color:hsl(120,65%,75%); }hsla颜色指定HSLA颜色值HSLA色调饱和度亮度αα是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0完全透明和1.0完全不透明之间的参数。p { background-color:hsla(120,65%,75%,0.3); }常用字体属性字体大小属性名font-size通常给 body 设置 font-size 属性字体族属性font-family如果字体包含空格必须用引号包裹通常在最后写上serif和sans-serif字体风格属性名font-style常用值1.normal 正常2.italic 斜体更推荐3.oblique 斜体字体粗细属性名font-weight常用值一、关键词1.lighter2.normal3.bold4.bolder二、数值100~1000 无单位100~300lighter 400~500normal 600及以上bold字体复合属性属性名font1.字体大小、字体族必须写上2.字体族必须是最后一位3.字体大小必须是倒数第二位4.属性之间用空格隔开常用文本属性文本颜色属性名color可选值1.颜色名2.rgb / rgba常用3.HEX / HEXA常用4.HSL / HSLA文本间距字母间距letter-spacing单词间距word-spacing属性值为像素px文本修饰属性名text-decoration可选值overlineunderlineline-throughnone可搭配下面值使用dotted 虚线wavy 波浪线也可指定颜色文本缩进属性名text-indent属性值CSS中的长度单位。egpx文本对齐水平属性名text-align属性值left center right垂直顶部默认就是顶部对齐居中heightline-height底部line-heightheight x 2-font-size - x(x是根据具体字体族)行高属性名line-heught可选值1.normal2.px3.数字4.百分比vertical-align注意不能控制块元素属性名:vertical-align作用用于指定同一行元素之间或表格单元格内的文字的垂直对齐方式常用值1.baseline默认值2.top3.middle4.bottom列表相关属性可以用在 ul ol li 元素上属性描述属性值list-style复合属性。用于把所有用于列表的属性设置于一个声明中没有数量、顺序要求list-style-image将图像设置为列表项标志。url图片地址list-style-position设置列表中列表项标志的位置。insideoutsidelist-style-type设置列表项标志的类型。nonedecimal 数字disc 圆形squarelower-roman 小写罗马字upper-roman 大写罗马字lower-alpha 小写字母upper-alpha 大写字母表格相关属性表格独有属性仅在table标签内可以使用边框相关属性不止表格能用其他元素都能用属性名功能属性值border-width边框宽度border-color边框颜色border-style边框风格none默认值solid实线dashed虚线dotted点线double双实线border边框复合属性背景相关属性鼠标相关属性属性名cursor属性值pointer 小手 move移动图标 text文字选择器等自定义图标url .pointer常用长度单位CSS中设置长度必须有单位1.px像素。2.em相对元素font-size的倍数。3.rem相对根字体大小html标签就是根。4.%相对父元素计算。元素的显示模式块元素block又称块级元素特点1. 在页面中独占一行不会与任何元素共用一行是从上到下排列的。2. 默认宽度撑满父元素。3. 默认高度由内容撑开。4.可以通过 CSS 设置宽高。行内元素inline又称内联元素特点:1. 在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列。2. 默认宽度由内容撑开。3. 默认高度由内容撑开。4.无法通过 CSS 设置宽高。行内块元素inline-block又称内联块元素特点1. 在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列。2. 默认宽度由内容撑开。3. 默认高度由内容撑开。4.可以通过 CSS 设置宽高。总结各元素的显示模式修改元素显示模式属性名display盒子模型组成部分CSS会把所有的HTML元素都看成一个盒子所有的样式也都是基于这个盒子。盒子的大小content左右padding左右border。1.margin外边距盒子与外界的距离。2.border边框盒子的边框。3.padding内边距紧贴内容的补白区域。4.content内容元素中的文本或后代元素都是它的内容。盒子的内容区content所谓的默认宽度就是不设置width属性时元素所呈现出来的宽度。总宽度 父的 content — 自身的左右 margin 。内容区的宽度 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。盒子的内边距padding盒子的边框border)边框相关属性有20个盒子的外边距marginmargin 注意事项1. 子元素的 margin 是参考父元素的 content 计算的。因为是父亲的 content 中承装着子元素2. 上 margin 、左 margin 影响自己的位置下 margin 、右 margin 影响后面兄弟元素的位置。3. 块级元素、行内块元素均可以完美地设置四个方向的 margin 但行内元素左右margin 可以完美设置上下 margin 设置无效。4. margin 的值也可以是 auto 如果给一个块级元素设置左右 margin 都为 auto 该块级元素会在父元素中水平居中。5. margin 的值可以是负值。margin塌陷问题什么是margin塌陷第一个子元素的上margin 会作用在父元素上最后一个子元素的下margin 会作用在父元素上。如何解决margin塌陷方案一 给父元素设置不为 0 的 padding 。方案二 给父元素设置宽度不为 0 的 border 。方案三给父元素设置 css 样式 overflow:hiddenmargin合并问题什么是 margin 合并上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并取一个最大的值而不是相加。如何解决 margin 塌陷无需解决布局的时候上下的兄弟元素只给一个设置上下外边距就可以了。处理内容溢出属性名overflow属性值1.visible 显示默认值2.hidden 隐藏3.scroll 显示滚动条不论内容是否溢出4.auto 自动显示滚动条内容不溢出不显示隐藏元素的两种方式方式一visibility 属性visibility 属性默认值是 show 如果设置为 hidden 元素会隐藏。元素看不见了还占有原来的位置元素的大小依然保持。方式二 display 属性设置 display:none 就可以让元素隐藏。彻底地隐藏不但看不见也不占用任何位置没有大小宽高。样式的继承会继承的 css 属性字体属性、文本属性除了vertical-align、文字颜色 等。不会继承的 css 属性边框、背景、内边距、外边距、宽高、溢出方式 等。一个规律能继承的属性都是不影响布局的简单说都是和盒子模型没关系的。元素的默认样式元素一般都些默认的样式例如1. a 元素下划线、字体颜色、鼠标小手。2. h1 ~ h6 元素 文字加粗、文字大小、上下外边距。3. p 元素上下外边距4. ul 、 ol 元素左内边距5. body 元素 8px 外边距4个方向优先级元素的默认样式 继承的样式布局技巧如何让子元素在父亲中 水平居中1.若子元素为块元素给父元素加上 margin:0 auto; 。2.若子元素为行内元素、行内块元素给父元素加上 text-align:center 。如何让子元素在父亲中 垂直居中1.若子元素为块元素给子元素加上 margin-top 值为(父元素 content 子元素盒子总高) / 2。2.若子元素为行内元素、行内块元素让父元素的 height line-height 每个子元素都加上vertical-align:middle;补充若想绝对垂直居中父元素 font-size 设置为 0 。元素之间的空白问题给父元素设置font-size:0再给需要显示文字的元素单独设置字体大小行内块的幽灵空白问题方案一给行行内块设置vertical值不为baseline即可设置为middel /bottom /top方案二若父元素中只有一张图片设置图片为display:block。方案三给父元素设置font-size: 0。如果该行内块内部还有文本则需单独设置font-size浮动浮动简介属性名float元素浮动后特点1.脱离文档流。2.不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高。3.不会独占一行可以与其他元素共用一行。4.不会margin合并也不会margin塌陷能够完美的设置四个方向的margin和padding。5.不会像行内块一样被当做文本处理没有行内块的空白问题。浮动后的影响对兄弟元素的影响 后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素。解决方法