HTML/CSS考点(更新中...)

最新推荐文章于 2022-04-14 16:32:07 发布

孤风随雨

最新推荐文章于 2022-04-14 16:32:07 发布

阅读量238

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_47723644/article/details/111567624

版权

html/css

css权重及引入方法

css权重越大,优先级越高
先说说 CSS 7 种基础的选择器：

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href=“segmentfault.com”]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

内联样式权重1000,id选择器权重100,类选择器权重10,标签选择器及伪元素选择器权重为1

优先级也可以通过 !important 来改变

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

(1).行内样式: 使用style属性引入CSS样式。

实际在写页面时不提倡使用，在测试的时候可以使用。

<p style="color: red;font-size: 16px">行内样式</p>

(2).内部样式表: 在style标签中书写CSS代码。style标签写在head标签中。

<style>
   div{
     color: blue;
     font-size: 20px;
   }
 </style>

(3).外部样式表: CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

<link rel="stylesheet" href="./test.css">   // 推荐
    <style>
      @import url('./test.css')
    </style>

a标签的作用

超链接: 页面跳转

<a href="http://www.baidu.com">百度一下,你就知道</a>

锚点: 定位到当前页面的某个位置或快速找到目标

  <div id="app">123</div>
  <div style="height: 1000px;"></div>
  <a href="#app">百度一下,你就知道</a>

打电话,发邮件等

  <a href="tel:150xxxxxxxx">电话</a>
  <a href="mailto:xxxxxxxxx@qq.com">邮件</a>

调用js方法

<a href="javascript: console.log('123')">js</a>
  <a href="javascript: add()">js</a>
  <script>
    var a = 1
    function add(){
      console.log(a+100);
    }
  </script>

下载文件

// 在href中放上需要下载的文件的相对路径
<a href="./demo.pdf">下载文件</a>

用css画三角形

通过设置border来实现三角形

<style>
    #test{
      width: 0px;
      height: 0px;
      border-bottom: 200px solid red;
      border-left: 150px solid transparent;
      border-right: 150px solid transparent;
    }
  </style>
  <div id="test"></div>

在这里插入图片描述

未知宽高元素水平垂直居中

1.绝对定位法: 给当前元素设置绝对定位,给其父级元素设置相对定位
设置transform: translate(-50%,-50%)

#father{
      background-color: red;
      width: 500px;
      position: relative;
      height: 500px;
    }
    #son{
      position: absolute;
      background-color: white;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  </style>

在这里插入图片描述
2.绝对定位法:将top,buttom,left,right都设置为0,将margin设置为auto

#son{
      position: absolute;
      background-color: white;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

3.弹性布局: 设置align-items和justify-content,让其左右居中加上下居中

 #father{
      background-color: red;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 500px;
    }

元素种类的划分

在这里插入图片描述

盒子模型及理解

html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型，如下图所示：
在这里插入图片描述
width和height 属性用来设置内容区域的宽和高，height属性在默认情况下和内容框的高度相同，也就是随内容多少的变化而变化。
padding 为盒子模型的内边距宽度，也就是内容到边界（border）直接的距离。
border 属性是用于设置边界的宽度（border-width），样式（border-style），颜色（border-color）
margin 属性设置了盒子外部区域的宽度，这个属性推开了页面布局中其他的盒子。margin属性的值可以为负，表示这个元素的边界会向内凹，如果margin的值为正值，那么表示这个块级元素的边界向上下左右某个方向拉伸。

盒模型分为两类:标准盒模型和IE盒模型.

标准盒模型的宽度为content内容的宽度
IE盒模型的宽度为content+Padding+border

定位方式及其区别（文档流）

定位方案（文档流）是控制元素的布局，有三种常见方案:

1.普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。普通流其实就是指BFC中的FC
2.浮动流 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。浮动的元素会脱离文档流
3.定位流（绝对定位） (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

margin 塌陷及合并问题

margin塌陷问题

这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。
因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题。

比如下面这个例子:

<style>
    div{
      width: 300px;
      height: 300px;
      background-color: blue;
      margin-top: 50px;
    }
    div>div{
      width: 100px;
      height: 100px;
      background-color: green;
      margin-top: 100px;
    }
  </style>
  <div>
    <div></div>
  </div>

在这里插入图片描述按照我们预想的,应该是它们整体离上边有50px,小方块离大方块上边100px,但结果并不是我们所想的那样,这就是margin塌陷

解决方法:

给外层元素认为加一个“棚顶”:border

.box{
     border: 1px solid red;
     width: 300px;
     height: 300px;
     background-color: blue;
     margin-top: 50px;
   }

bfc–block format context 块级格式化上下文
每一个元素都是一个盒子，每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式，让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种，我们可以根据实际的需求采用不同的方法
overflow:hidden;
display:inline-block;
position:absolute;
float:left;

.box{
      overflow:hidden;
      width: 300px;
      height: 300px;
      background-color: blue;
      margin-top: 50px;
    }

在这里插入图片描述

浮动模型及清除浮动的方法

浮动:float有3个值:left左浮动,right右浮动,none默认不浮动

浮动的特点:

浮动的元素会脱离文档流

浮动的元素不分块元素和内联元素,都可以设置宽高,margin,padding等

浮动元素没有办法撑起父容器的高度

对于没有浮动的元素来说,就好像浮动的元素不存在一样,浮动元素下面不浮动的元素会钻到浮动元素的"底 部",但是文本和图片,超链接(行内样式)不会跑到浮动元素的下面(字围绕效果)

两个浮动元素之间绝对不会有重叠的情况

后面的浮动元素绝对不会在垂直方向超过前面的浮动元素.

浮动的元素不会再出现margin塌陷

左浮动的元素,会先脱离文档流, 然后努力向左浮动,直到碰到他的父容器的左边缘或者另外另个浮动元素的右边缘, 然后停止浮动(右浮动同理)

清除浮动

在一个div中,有一个儿子div,父亲div是由儿子div的高度撑起来的,此时儿子div进行浮动后脱离文档流,那么父亲div没有高度后,后边的div会顶上来.那么整个结构就很乱了,必须要清除浮动

方法一:
手动给父元素添加一个高度
缺点:不够灵活
方法二:
使用clear属性清除浮动
clear属性的作用是清除前面的浮动元素给自己带来的影响
clear:left; 清除左浮动 clear:right; 清除右浮动 clear:both; 同时清除左右浮动
缺点:父元素还是没有高度,设置了clear属性的元素的margin-top失效
方法三:
使用外墙法,给浮动元素和没有浮动的元素添加一个新的块元素,专门用来清除浮动,给这堵墙设置清除上面浮动元素对墙的影响,下面的元素也可以正常显示
缺点:影响HTML的结构,父元素仍然没有高度
方法四:
使用内墙法,将那堵专门用来清除浮动的墙设置在浮动元素的父元素里面.因为父元素多了一个儿子,这个儿子并没有浮动,那么父元素必须包含住它,所以父元素就有了自己的高度
方法五:
使用伪元素::after{}给父元素最后添加一个新的儿子
.clear-fix::after{
content:"";
display:block;
clear:both;
}
技巧:哪个需要清除就给谁添加一个类clear-fix(类名可以自己取)
方法六:
给浮动元素的父元素添加一个overflow:hidden清除浮动.

CSS 定位属性

css position属性:
position属性之relative

作用：
使元素成为可定位的祖先元素（绝对定位的基准）
特点：
（1）left、top、right、bottom属性和z-index属性可以生效。
（2）使用了相对定位，元素不会离开常规流。像下图这样。

<style>
    #box{
      width: 400px;
      height: 400px;
      border: 1px solid black;
      
    }
    div>span{
      width: 80px;
      height: 80px;
      background-color: yellow;
      display: inline-block;
    }
    #test{
      position: relative;
      top: 100px;
    }
  </style>
  <div id="box">
    <span></span>
    <span></span>
    <span id="test"></span>
    <span></span>
    <span></span>
  </div>

在这里插入图片描述

position属性之absolute

作用：
使元素脱离常规流（起到定位的作用）
特点：
（1）脱离常规流。如下图：

#box{
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }
    
    #test{
      position: absolute;
      top: 100px;
    }

在这里插入图片描述
position属性之fixed

作用：
使元素脱离常规流（起到定位的作用，相对于浏览器窗口做定位）
特点：
（1）脱离常规流。
（2）相对于浏览器窗口做定位。

position属性之sticky

作用：
制作出吸附的效果
特点：
（1）不脱离常规流
（2）跟fixed一样相对于浏览器窗口定位，但因为不脱离常规流，所以不能超过父元素的范围，
不能大于（大于离不开父元素）也不能小于（小于没有位置放）。

display 及相关属性

display属性取值有很多，可能的取值在下图中列出：
在这里插入图片描述

IFC 与 BFC

BFC
BFC（Block Formatting Context）叫做“块级格式化上下文"
布局规则如下：
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。

介绍过了BFC的布局规范，再来说说哪些元素会产生BFC。
1.根元素；
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible

IFC

IFC（inline Formatting Context）叫做“行级格式化上下”
局规则如下：
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行；

圣杯布局和双飞翼布局的实现

孤风随雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS考点(更新中...)

html/csscss权重及引入方法a标签的作用css权重及引入方法css权重越大,优先级越高先说说 CSS 7 种基础的选择器：ID 选择器，如 #id{}类选择器，如 .class{}属性选择器，如 a[href=“segmentfault.com”]{}伪类选择器，如 :hover{}伪元素选择器，如 ::before{}标签选择器，如 span{}通配选择器，如 *{}CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属
复制链接

扫一扫