CSS

script_____
115 阅读9分钟

常见的行内元素和块级元素和行内块级元素都有哪些？特点是什么？

行内元素（内联元素）

  • 常见的行内元素有：<a >,<strong>,<b>,<em>,<del>,<span >等
  1. 和相邻的行内元素在一行上，不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。
  2. 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
  3. 默认的宽度就是它本身的宽度
  4. 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外） 块级元素
  • 常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
  1. 块级元素会独占一行
  2. 高度，行高，外边距和内边距都可以单独设置
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他的块级元素 行内块元素
  • 常见的行内块元素有：input、img
  1. 和其他行内或行内块级元素元素放置在同一行上；
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。 如何将行内元素转为块级元素
  • display：block ，定义元素为块级元素
  • display : inline ，定义元素为行内元素
  • display：inline-block，定义元素为行

p元素和div元素都是块元素，那他们两者之间有什么区别呢

都是块级元素，但是div可以嵌套p标签，但是p标签内不能嵌套div标签

first-of-type和first-child有什么区别

  • p:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。该父元素的第一个子元素一定要是p元素。
  • p:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

如何清除浮动

  1. 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
  2. 在最后一个浮动的元素后面添加一个新的块级元素并对其应用clear:both
  3. 父级div定义overflow:hidden
  4. 父级div定义overflow:auto

css2和css3有什么区别？CSS3新增了哪些新特性？

blog.csdn.net/weixin_4447…

CSS 选择器及优先级

选择器的种类

  • id选择器(#myid)
  • 类选择器(.myclass)
  • 属性选择器(a[rel="external"])
  • 伪类选择器(a:hover, li:nth-child)
  • 标签选择器(div, h1,p)
  • 相邻选择器（h1 + p）
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器(*) 优先级：
  • !important
  • 内联样式（1000）
  • ID选择器（0100）
  • 类选择器/属性选择器/伪类选择器（0010）
  • 元素选择器/伪元素选择器（0001）
  • 关系选择器/通配符选择器（0000） 带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

position 属性的值有哪些及其区别

  • 固定定位 fixed： 不脱离文档流。元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
  • 相对定位 relative：脱离文档流。 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
  • 绝对定位 absolute：脱离文档流。 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
  • 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
  • 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

CSS 盒子模型包括？

盒模型由四部分组成，从内到外分别是：content -> padding -> border -> margin

盒模型分类？IE怪异盒模型和W3C标准盒模型的区别

如果 CSS 里面写一个盒 width: 100px：

  • 标准盒模型显示出来，是大于等于100px，因为 100px仅仅是 内容 的宽度，最终显示出来的是 100px + padding + border
  • 但是 IE 怪异盒模型显示出来，就是100px，内容 + padding + border = 100px

标准盒模型

单个元素宽度 = content

盒子总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

怪异盒模型

单个元素宽度 = content + padding + border

盒子总宽度 = margin-left + width + margin-right

BFC的原理布局规则？如何创建BFC？BFC的使用场景

BFC的概念 BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。 BFC的原理布局规则

  • 内部的Box会在垂直方向，一个接一个地放置
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反
  • BFC的区域不会与float box重叠
  • BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也参与计算高度
  • 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。 如何创建BFC？
  • 根元素，即HTML元素
  • float的值不为none
  • position为absolute或fixed
  • display的值为inline-block、table-cell、table-caption
  • overflow的值不为visible BFC的使用场景
  • 去除边距重叠现象
  • 清除浮动（让父元素的高度包含子浮动元素）
  • 避免某元素被浮动元素覆盖
  • 避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平居中？垂直居中？

垂直居中

  1. 利用line-height实现居中，这种方法适合纯文字类
  2. 通过设置父容器相对定位 ，子级设置绝对定位，标签通过margin实现自适应居中
  3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
  4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
  5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

水平居中

  • 对于 行内元素 : text-align: center;
  • 对于确定宽度的块级元素：
    1. width和margin实现。margin: 0 auto;
    2. 绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
  • 对于宽度未知的块级元素
    1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
    2. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
    3. 绝对定位+transform，translateX可以移动本身元素的50%。
    4. flex布局使用justify-content:center

弹性布局flex

传统的布局方案是基于盒模型，依赖display属性 + position属性 + float属性来进行布局，它对于那些特殊布局非常不方便。直到css3的flex布局属性，出现这种简洁、方便、快速的布局方式。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素

隐藏页面中某个元素的方法？visibility：hidden与display：none的区别

  • visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

position之后文件会脱离文档流，脱离文档流之后会有层级，我们通常z-index来指定层级级别，如果是不同层级可以比对吗？比如A和B是同一层级，B层级里面还有一个C层级，那么a和c能比较他们的层级吗？

z-index:可以设置元素的叠加顺序，但依赖定位属性。 z-index大的元素会覆盖z-index小的元素 z-index为auto的元素不参与层级比较 z-index为负值，元素被普通流中的元素覆盖 受制于父元素的影响的优势，父元素的层级大于相邻元素的层级，无论它的级别有多小，都可以大于相邻的小于父元素的层级。

实现一个自适应宽度的正方形

用css画三角形

avatar
文章
阅读
粉丝