CSS小结

CSS小结

网页布局的三种方式

标准流

就是我们之前介绍的 显示模式

显示模式 display

块级元素 block

• 独自占据一行
• 默认的宽度是父元素的宽度
• 可以去设置宽高
• 里面可以包含任何东西
  • 文字类的块级元素不能再包含div
• 常见的块级元素
  • h1~h6
  • p标签
  • div标签
  • ul li 标签
  • form表单域

行内元素 inline

• 一行显示多个
• 不能设置宽高
• 默认的宽高是内容的宽高
• 里面可以包含文本或者其他的行内元素
• 常见的行内元素
  • span
  • a标签
  • 文本格式化标签 strong 加粗 em 倾斜 ins 下划线 del 删除线

行内块 inline-block

• 一行显示多个
• 可以设置宽高
• 默认的宽度是内容的宽度
• 常见的行内块
  • img 图片标签
  • input 表单元素

可以去修改对应元素的显示模式

利用display的属性

浮动

为什么需要浮动？

能够让我们块级元素水，用来布局的

语法

div{
    float: left| right;
}

特点

• 浮： 漂浮在标准流的上面
• 漏： 不占据标准流的位置，脱标，后面的标准流的兄弟元素就会占据它原来的位置
• 特： 改变了元素的特性，类似于行内块，浮动元素的宽度和大于父元素的话，会自动换行

浮动元素的小细节

浮动的元素不会影响前面的兄弟元素

浮动的孩子都会套一个父亲，这个父亲是用来占据标准流的位置，防止页面崩塌

清除浮动

为什么需要清除浮动？

因为浮动的元素没有占据标准流的位置，然后父元素如果没有设置高度的话，那么父元素的高度为0；

清除浮动的必然的两个条件？

1.父元素没有设置高度

2.里面的子元素浮动了

清除浮动的本质

解决父元素高度为0的问题

清除浮动的方式

• 额外标签法

  • 在浮动元素的后面添加一个空的标签，然后设置一个属性 clear: both;

  <div>
    <div>我浮动了</div>
    <div style="clear: both;"></div>
  <div>
  

• 给父亲添加 overflow: hidden的属性

• 伪元素方式

  • 单伪元素

  .clearfix:after {
      content: "";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
  }
  .clearfix {
      *zoom: 1;
  }
  

  • 双伪元素

  .clearfix:before,
  .clearfix:after {
      content: "";
      display: block;
  }
  .clearfix:after{
      clear: both;
  }
  .clearfix {
      *zoom: 1;
  }
  

定位

为什么需要定位？

解决盒子层叠的效果，或者是某一个盒子固定在浏览器的某一个位置

定位的组成

定位模式

• static 静态定位； 就是标准流
• relative 相对定位
  • 相对于自身原来在标准流中的位置进行定位
  • 不脱标的
• absolute 绝对定位
  • 参照的最近的有定位的父辈元素，如果父辈元素都没有定位，那么参照的就是页面的左上角
  • 完全脱标
• fixed 固定定位
  • 参照的是浏览器的可视区域
  • 完全脱标

边偏移

盒子的偏移量 设置我们的方位名词

div {
    left: 左偏移
    right: 右偏移
    top: 上便宜
    bottom： 下偏移
}

堆叠顺序 z-index

是定位元素特有的。z-index的默认值是0，值越大，盒子越在上面

如何让一个定位的元素居中显示

例如：一个盒子水平居中

div {
    left: 50%;
    margin-left: -自身的宽度一半;
}

高度是同理的

一定一定要记住一句话，叫做子绝父相

盒子模型

组成

• 内容
• 边框
• 内边距
• 外边距

边框 border

组成

• width 粗细
• style 样式
• color 颜色

语法

div {
    border-width: 2px;
    border-style: solid实线|dashed虚线|dotted点线;
    border-color: #fff;
    /*简写方式*/
    border: width style color;
}

边框是允许单独设置某一个方向的

可以利用边框来实现 三角形

内边距 padding

语法：

div {
    /*可以单独去设置某一个方向的内边距*/
    padding-left|right|top|bottom: 2px;
    /*上下左右的内边距是5px*/
    padding: 5px;  
    /*上下是5px  左右是10px*/
    padding: 5px 10px;
    /*上是5px  左右10px  下 15px*/
    padding: 5px 10px 15px;
    /*上是5px  右10px  下 15px  左是 20px*/
    padding: 5px 10px 15px 20px;
}

注意： 内边距是不能设置负值的，设置的是内容与边框之间的距离

盒子的真实大小

一个盒子真实大小 = 内容的宽度|高度 + 对应两边的内边距 + 对应两边的边框;

一种情况下内边距不会撑大盒子：块级盒子没有设置宽度的情况下

外边距 margin

语法:

div {
    /*可以单独去设置某一个方向的内边距*/
    margin-left|right|top|bottom: 2px;
    /*上下左右的内边距是5px*/
    margin: 5px;  
    /*上下是5px  左右是10px*/
    margin: 5px 10px;
    /*上是5px  左右10px  下 15px*/
    margin: 5px 10px 15px;
    /*上是5px  右10px  下 15px  左是 20px*/
    margin: 5px 10px 15px 20px;
}

外边距是设置盒子与盒子之间的距离

如何让一个块级盒子居中显示

1. 设置宽度
2. 设置 margin: auto;

外边距有一些不稳定性

兄弟关系垂直方向外边距的合并问题

相邻的两个块级盒子，上面的盒子设置了margin-bottom: 50px; 下面的盒子设置了margin-top: 40px;那么两个盒子中间的距离是50px

**解决：**给一个盒子设置一个外边距

父子关系垂直方向外边距的塌陷问题

嵌套的两个块级盒子，里面的孩子设置了margin-top: 50px; 那么效果并不是子孩子距离父亲上边框的距离有50px，而是把父亲一起拉下来了

解决：

• 给父亲设置上边框
• 给父亲设置上内边距
• 给父亲设置 overflow: hidden
• 设置浮动
• 设置了定位(绝对定位、固定定位)

布局的时候

宽高 --> 内边距 --> 外边距

属性

背景相关属性 background

background-color 背景颜色

background-image 背景图片 url(图片的路径)

background-position 背景定位

​ 1.方位名词 left|right top | bottom center

​ 2.精准像素 第一个值 是X轴的偏移 第二个值是Y轴的偏移

background-repeat 背景平铺 repeat 平铺 | no-repeat 不平铺 | repeat-x 水平方向平铺 | repeat-y 垂直方向平铺

background-attachment 背景附着(是否固定) scroll不固定|fixed 固定

简写方式如下：

background: 颜色 图片 是否平铺 是否固定 定位;

字体相关的属性 font

font-size 字体大小

font-style 是否倾斜 italic倾斜 | normal 不倾斜

font-family 字体 如果是中文或者是有特殊符号的英文 要用引号引起来

font-weight 粗细 400(normal)代表 正常 700(blod)代表加粗 number 100~ 900

简写方式如下:

font: 粗细 是否倾斜 字体大小 字体;

文本装饰类的属性

text-align 设置里面的内容水平的对齐方式 （内容包含 文本内容和内联元素） left 左对齐|right 右对齐 |center 居中

text-indent 首行缩进，单位是 em 1em代表是一个字的距离

text-decoration 文本装饰， none 去掉下划线| underline 设置下划线;

color 字体的颜色

line-height 设置行高，行高等于高度，单行文本 垂直居中

CSS三大特性

继承性

子承父业，子元素可以去继承父元素的一些属性

text-开头的 font-开头的 line-开头的 color

层叠性

样式冲突的，采取就近原则，近的覆盖掉远的，前提是在优先级相同的情况

优先级

CSS优先级的算法公式

继承的或者是通配符 0, 0, 0, 0

标签选择器 0, 0, 0, 1

类，伪类 0, 0, 1, 0

id选择器 0, 1, 0, 0

style行内样式 1, 0, 0, 0

!important 直接作用在属性后面

权重是可以叠加的，简单的加法运算，不能进位

选择器

基础选择器

• 标签选择器
  • 能够选择出整个页面对应的标签，不能差异化处理
  • 不要用没有语意的标签选择器 div span
• 类选择器
  • 可以差异化处理，能够选择1个或者是多个
• id选择器
  • 唯一性，只要在style里面看到了 # 号，那就是id选择器，用的不多，通常配合js去使用
• 通配符选择器
  • *{margin: 0; padding: 0;}取消元素默认的内外边距

复合选择器

• 后代选择器
  • 能够选择出所有的子孙后代 选择器中间用 空格 隔开
• 并集选择器
  • 用于集体声明，中间用 逗号隔开
• 链接伪类选择器
  • a:link 为访问的时候，触发的样式
  • a:visited 访问过后，触发的样式
  • a:hover 鼠标移入的时候触发的样式
  • a:active 长按的时候触发的样式
• 子元素选择器
  • 只能够选择器亲儿子，选择器中间用 > 隔开
• 交集选择器
  • 并且的意思，即是…又是 span.cls{}这个意思就是选择出的 即是span标签，并且类名叫 cls的元素

元素的显示与隐藏

• 利用 display : none; 隐藏
  • 隐藏，不占据位置
• 利用 visibility: hidden 隐藏
  • 隐藏，占据位置
• 利用 overflow: hidden 隐藏
  • 超出的内容进行隐藏

精灵图技术

为什么有精灵图技术？

减少与服务器的交互的次数，减少了服务器的压力，从而优化了我们的网络请求

减少了命名的烦恼

精灵图的核心技术

利用了 背景定位 background-postion

使用

1.测量图标的宽高 ，然后设置给相应的盒子

2.插入这张背景图，然后需要测量图标在大图片上面的位置，然后设置给 background-position

如何让文本显示省略号

• 强制一行显示
  • white-space: nowrap;
• 溢出隐藏
  • overflow: hidden;
• 省略号替代
  • text-overflow: ellipsis;

如何取消图片的底部空隙

原因？

img 是内联元素，默认是基线对齐，所以就产生空隙

解决:

1.设置图片为块级元素

2.设置图片的vertical-align的属性

3.给图片的父元素设置 font-size: 0;

vertical-align属性

设置行内块元素对齐的方式

top: 顶线对齐

middle 中线对齐

baseline 基线对齐

bottom 底线对齐

用户界面相关的属性

鼠标样式 cursor

cursor: pointer; 小手

去除轮廓线

outline: 0|none; input文本输入框身上

防止文本域拖拽

rezise: none;