1.继承

css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们css中的继承。官方的解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。

a.有继承的属性

1.字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
2.文本系列属性
text-index:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白,即字间隙
letter-spacing:增加或减少字符间的空白,即字符间距
direction:规定文本的书写方向
color:文本颜色
3.元素的可见性
visibility
4.光标属性
cursor
5.所有元素可以继承的属性
visibility/cursor
6.内联元素可以继承的属性
字体系列属性/除text-indent,text-align之外的文本系列属性
7.块级元素可以继承的属性
text-align/text-indent

b.无继承的属性

1.display
2.文本属性
vertical-align:垂直文本对齐
text-shadow:文本阴影效果
white-space:空白符
3.盒子模型属性
width/height/margin/border/padding
4.背景属性
background/background-color/background-image/background-repeat/background-position
5.定位属性
float/clear/position/top/right/bottom/left/z-index/overflow
6.轮廓样式属性
outline

2.css预处理工具

css预处理器是一个能让你通过预处理器自己独特语法生成css的程序

  • sass
  • 兼容css
    扩展名.scss/.sass
  • less
    兼容css
    扩展名.less
  • stylus
    兼容css
    扩展名.styl
    采用缩进语法

3.行内元素/块级元素

  • 块级元素
    1.总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列
    2.高度,宽度,margin,padding都是可控的,设置有效
    3.宽度没有设置时,默认为100%
    4.块级元素中可以包含块级元素和行内元素
  • 行内元素
    1.和其它元素在一行,即行内元素和其它元素都会在一条水平线上排列
    2.高度,宽度是不可控,设置无效,由内容决定
    3.根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素
  • 转换
    1.display:inline转换为行内元素
    2.display:block转换为块状元素
    3.display:inline-block转换为行内块状元素
  • 块状元素可以继承的属性
    Text-indent
    Text-align
    Visibility
    Cursor

4.盒模型

css盒模型本质是一个盒子,封装html元素,包括margin/border/padding/content

  • 标准模型
    width=content
  • ie模型
    width=border+padding+content
  • 自定义
    Box-sizing:content-box(默认模式)
    Box-sizing:border-box(ie模式)
  • js获取盒模型宽高
    dom.style.width/height 获取行内样式的宽高
    window.getComputedStyle(dom).width/height ie模式下
    Dom.getBoundingClientRect().width/height 渲染后的宽高
    dom.offsetWidth/offsetHeight 内容+内边距+边框不包括外边距

5.bfc块级格式化上下文

  • 概念:bfc是css布局的一个概念,是一个独立的渲染区域,是一个环境,里面的元素不会影响外部的元素。
  • 问题:父子元素和兄弟元素边距重叠,重叠原则取最大值,空元素的边距重叠取margin和padding的最大值
  • css创建bfc,脱离文档流
    1.html元素
    2.浮动
    3.绝对定位
    4.display:inline-block
    5.表格元素
    6.弹性盒子
    7.overflow:hidden
  • 使用场景
    1.自适应布局,避免多列布局由于宽度计算四舍五入换行
    2.避免元素被浮动元素覆盖
    3.父元素高度包含子浮动元素,清除内部浮动
    4.去除边距重叠,分别属于不同的bfc

6.ifc行内格式化上下文

1.内部的box会在水平方向,一个接一个的放置
2.这些box的水平方向的margin/border/padding都有效
3.对齐方式line-height/vertical-align

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。