CSS-0802~0805

企业开发 2024-11-04 21:08
0 阅读

title: “CSS-0802~0804”
date: 2022-08-02T13:46:36+08:00
draft: false

文章目录

元素类型

元素类型/元素显示模式:根据css语法将元素在页面中的显示模式(独占一行的还是在一行显示)进行分类

一、块级元素

eg：div、p、h1-h6、ul、ol、li、dl、dt、dd、table、hr等

特点：

  1. 独占一行，自动换行
  2. 可以设置宽高
  3. 一般会作为容器取包裹别人，p标签不能包裹块级元素（包括它自己）因为浏览器会解析错误
  4. 利用margin：auto加到块级元素身上可以实现水平居中（在父元素内居中）

二、内联元素

eg：span/a/b/i/u/ins/del/em/sup/sub/img等

  1. 在一行显示
  2. 不可以设置宽高
  3. 一般不会去包裹别的标签，a标签可以包裹块级元素
  4. 内联元素的居中需要在该元素的父元素为块级元素，且给父级元素设置**text-align: center;**属性
  5. 内联元素之间代码的回车会在页面中形成小空隙，解决方案如下：
    • 将代码写在同一行
    • 将回车的空白处注释掉
    • 设置float属性

三、内联块元素

  1. 在一行显示
  2. 可以设置宽高
  3. 内联块元素居中需要在该元素的外面套一个块级元素，且给父级元素设置text-align: center;
  4. 内联元素之间代码的回车会在页面中形成小空隙
    • 将代码写在同一行
    • 将回车的空白处注释掉
    • 也可加float

元素类型转换

display:inline(内联元素)/block(块级元素)/inline-block(内联块元素);

float浮动

一、浮动属性：

float:

  • none 不浮动，默认值
  • left 向左浮动
  • right 向右浮动

二、功能

  1. 解决内联块元素之间的间隙
  2. 让块级元素紧紧排列成靠左(右)的一行
  3. 让两个块级元素一个靠左一个靠右(左边的要加左浮动，因为不加浮动的话会独占一行)

三、特点

  1. 浮动元素会脱离文档流，脱离文档流之后不占位置。后面的元素会跑到该浮动元素下面(浮动元素会遮挡住后面的元素)但是不会遮挡该元素的文字。
  2. 多个浮动元素的宽度如果超过父元素的话，会自动换到下一行，换行下来的时候，如果前面有某些元素高度出来的话，会遮挡住该元素靠过去
  3. 浮动会让内联元素变成块级元素

四、清除浮动

clear属性：

  • none 不清除
  • left 清除左浮动带来的影响
  • right 清除右浮动带来的影响
  • both 清除左右浮动带来的影响

盒模型

一、内容区(content)

  • 内容区在盒子里面
  • 用来放内容(文字、图片、盒子)的区域
  • 宽高所形成的区域就是内容区

二、内边距(padding)

padding 内边距 (内容和边框之间的距离)

  1. 值的设置

    • padding:数字px;一个值四个方向都有
    • padding:数字px 数字px; 上下 左右
    • padding:数字px 数字px 数字px; 上 左右 下
    • padding:数字px 数字px 数字px 数字px; 上 右 下 左
    • 单方向的padding: padding-方向(left/right/bottom/top):数字px;

  2. padding的特点

    • 使用padding之后盒子是会被撑大的,如果既想使用padding又不想被撑大的话,需要改变内容区的宽高(即在该宽高的基础上减去对应方向的padding值)
    • padding不可以设置负数
    • padding对于内联元素,左右显示正常,上下显示不准确,对块和内联块元素都正常
    • 用来调整内容区的问题

三、边框

  • 边框会撑大盒子,量取的时候量取边框里面

四、外边距 margin

1.margin值与padding类似：

  • margin:数值px;四个方向
  • margin:数值px 数值px; 上下 左右
  • margin:数值px 数值px 数值px; 上 左右 下
  • margin:数值px 数值px 数值px 数值px;顺时针
  • 单方向margin-方向(left/right/bottom/top):数值;

2.特点：

  • margin不会撑大盒子(改变margin不会改变盒子大小)
  • margin可以设置负数
  • margin对内联元素上下不生效,左右生效,对块和内联块都正常

3.作用：

  • 调整盒子和盒子之间距离
  • margin:auto; auto(自动) 自动计算
    • auto:1个值是四个方向,只能够实现水平居中 垂直不可以
    • auto是可以和数值一起使用

溢出属性:

属性：overflow/overflow-x/overflow-y

属性值：

  • visible 默认值，溢出后正常显示(即正常溢出)
  • hidden 溢出部分会被隐藏
  • scroll 溢出部分会出现滚动条
  • auto 自动 溢出时会显示滚动条，不溢出时则正常显示

单行文本溢出显示省略号：

第一步:设置文本不换行(一行显示)

​ white-space: nowrap;

第二步:设置文本溢出隐藏

​ overflow: hidden;

第三步:文本溢出部分用省略号代替

​ text-overflow: ellipsis;

title属性: 鼠标悬停时显示的文字提示信息，所有标签都有该属性。

css属性的继承性

加到父元素身上的属性,可以作用到其后代

  • 可以继承的属性

    1. 自体类 font-size(字体大小),font-weight(字体加粗),font-style(字体倾斜),font-family(字体类型)
    2. 文本类 text-align(文本水平位置),color(文本颜色),text-indent(文本缩进),line-height(行高),letter-spacing(字符间距),word-spacing(词间距)
    3. list-style-type(列表符号类型),list-style-position(列表符号位置),list-style-image(列表图片),list-style(列表复合写法)
    4. cursor、white-space等

  • 不可以继承的属性

    background、text-decoration、width、height、border、padding、margin、float、display、overflow

伪元素选择器

伪元素选择器的权重为1(冒号可以一个也可以两个)

  1. :first-letter{}或者::first-letter{}：选中第一个字符(对英文来说是第一个字母,对汉字就是第一个字) 且只对块级元素生效

  2. :first-inline{}或者::first-inline{}：选中元素内容的第一行（只对块级元素生效）

  3. 给元素里面的最前面添加内容，添加的元素属于内联元素

    ::before{
      
      
    content:"这里是添加的内容"; 
}

    content属性是必须存在,没有内容的话，也需要写空引号,且添加的内容在浏览器中无法被选中

  4. 给元素里面的最后面添加内容，添加的元素属于内联元素

    ::after{
      
      
    content:"这里是添加的内容"; 
}

    content属性是必须存在,没有内容的话，也需要写空引号,且添加的内容在浏览器中无法被选中

    注意：因为添加的元素(内容)属于的内联元素,所以会有空隙(可以把回车去掉)

自适应

宽度自适应

  1. 块级元素
    • 宽度不设置,跟随父元素的内容区的宽
    • 宽度设置百分数，百分数参考父元素的内容区的宽
    • 特殊的点
      • 有宽加浮动，就是设置的宽
      • 没宽且加浮动的话，宽度由内容撑开
  2. 内联元素宽度由内容撑开
  3. 内联块元素
    • 如果设置了宽的话，就以设置的宽显示
    • 没有设置宽的话，宽是由内容撑开的
  4. 应用场景
    • 如果板块的宽和父元素一样的宽的话就可以不设置宽，让其自适应即可
    • 通栏不设置让其和body(浏览器)一样宽度,达到自适应

高度自适应

  1. 块级元素
    • 高度不设置 由内容撑开
    • height:auto; 由内容撑开（相当于没用）
    • 设置百分数，跟随父元素
  2. 内联元素的高度由内容撑开
  3. 内联块元素
    • 如果设置了高，显示的就是该高度的区域
    • 如果不设置高，由内容撑开
  4. 应用场景
    • 如果内容的多少不确定的话，可以不设置高，让其由内容撑开
    • 页面中小板块或者文字对应的板块可以不设置高，让其由内容撑开

一屏（全屏）页面

实现一屏页面代码如下：

HTML代码

<div></div>

css代码

div,body,html{
    
    height: 100%;} 
div{
    
    background-color: pink;}/*添加此行代码是为了能够在网页中更加清晰的看到div显示全屏*/

原因: 默认情况body有宽,所以宽度不设置可以达到和body一样宽,但是body默认没高,只能依次向上找高

补充

版心：

  1. 在浏览器上或者网页中永远居中的
  2. 放主要内容的区域

通栏：

和浏览器宽度是一样的(即宽度设置为100%)

img问题

问题:img引入的图片会自带底部大约3px的小留白
两种解决方法:

img{
    
    display:block}      /*让img变为块级元素*/
img{
    
    vertical:middle}    /*设置垂直居中*/

lorem 可以自动生成英文段落

生成单词数：lorem+直接加单词数量,如：lorem5

生成段落数：lorem * 段落数量,如：lorem*5

margin的两个bug：

1.maigin的纵向重叠bug

给上面的元素加下边距,给下面的元素加上边距的时候,边距会产生重叠,以较大的值显示,左右的边距会相加 ：

css代码：

.box1{
    
    
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-bottom: 50px;
}
.box2{
    
    
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
}

HTML代码：

<div class="box1"></div>
<div class="box2"></div>

结果如图所示：

在这里插入图片描述

由结果我们可知，虽然给".box1"和".box2"分别设置了底部和顶部的外边距为50px和100px,但最终两个元素只相差了100px，这是因为margin的重叠bug，且只在纵向会出现此问题(即margin-top和margin-bottom)

2.margin-top的传递bug

给元素内的第一个子元素添上边距的时候，会错误的显示到父元素的身上：

css代码：

.box1{
    
    
    width: 300px;
    height: 300px;
    background-color: pink;
}
.box2{
    
    
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
}

HTML代码

<div class="box1">
    <div class="box2"></div>
</div>

结果如图所示：

在这里插入图片描述

由代码可知，我们并没有给".box1"加上边距，而是只给其子元素".box2"加了上边距，但是结果却是".box1"也被加上了上边距并跟着其向下移动。这是因为margin的传递性。

解决方法：

  1. 用padding替代

  2. 给父元素添加上边框

  3. 给父元素添加**overflow: hidden;**属性

  4. 给父元素或者该元素设置浮动属性

    注意：其中3和4方法原因是触发BFC,块级格式化上下文

猜你喜欢

目录

热门文章