基础回顾(三)| CSS核心样式

【写在开头】基础回顾系列的内容总结主要来源于拉钩课程大前端就业班,在之前一段自己有学过前端,但是存在的问题就是学的东西不系统,都是这边学一点,那里又学一点,等真正需要用的时候,就存在这个知识点有印象,但是不知道具体怎么使用,有什么注意的点。所以选择跟着拉钩的课程系统过一下知识点。
在为自己投资的过程中,与其去犹豫衡量值不值得,不如动起来,这才是最终效果反馈的决定性因素。

CSS核心样式

字体

粗细 font-weight

设置文字是否加粗显示

  • 单词类型属性值

​ normal:定义标准的字体;bold:定义粗体字符;

​ bolder:定义更粗的字体;lighter:定义更细的字体

  • 数字类型

​ normal:400 ; bold:700

  • 标签是自带的粗体
样式风格 font-style

设置文字的正体和斜体显示

  • normal:设置正规的字体,大多数标签的默认值
  • italic:设置斜体的文字,只要针对于英文
  • oblique:设置倾斜的字体,只是将文字倾斜显示
  • 自带斜体效果,italic斜体效果
行高 line-height

设置一行文字实际占有的高度,默认字体是带有行高的,在行高中是垂直居中的

  • px像素值:设置行高的像素值
  • 百分比数值:设置本身加载字号像素值的百分比
  • 必须参考设计图量取具体的数值(测量工具Fw)
字体综合 font

字体、字号、行高、加粗、斜体都是font综合属性的单一属性,五个单一属性值可以进行合写,每个值之间用空格进行分隔

  • 书写顺序:加粗、斜体、字号/行高、字体

文本

水平对齐 text-align

设置文本水平方向的对齐,不管是单行还是多行,都会对应方向对其

  • left:居左对齐,大部分标签的默认值
  • center:居中对齐
  • right:居右对齐
文本修饰 text-decoration

设置文本整体是否有线条的修饰效果

  • none:没有修饰,大多数标签的默认值

  • overline:上划线

  • line-through:中划线,删除线,同标签

  • underline:下划线,同标签

    常用方法:给a标签去掉下划线显示

文本缩进 text-indent

设置文本段落首行是否进行缩进

  • px单位:表示首行缩进多少像素
  • em单位:表示缩进几个中文字符的位置
  • 百分比:缩进文字所在标签的父级标签的width属性值的百分比
  • 属性值区分正负,正数表示向右,向下缩进,负数表示向左,向上缩进

盒模型

包含五个用来描述盒子位置,尺寸的数据

在这里插入图片描述

  • 书写元素内容区域 : width+height

  • 盒子实体化区域: width+height+padding+border

  • 盒子实际占位:width+height+padding+border+margin

width:添加元素内容区域的宽度
  • auto:默认值,浏览器可以计算实际的宽度
  • px: 像素值定义的宽度
  • %: 定义参考父元素宽度width的百分比宽度

特殊应用:

如果一个元素不添加width属性,默认值为auto,不同浏览器会根据其特点计算出实际的宽度.

元素独占一行的,width会默认撑满父元素的width区域,如果是不需要独占一行的,其width的值是内部元素内容撑开的

height:添加内容区域的高度
  • 属性值参照width三种属性值

特殊应用:

height高度的auto值,是内部元素内容自动撑开的高度,自适应内部内容的高度,不会占满整个浏览器

padding:内边距

设置元素的边框内部内容到宽高区域之间的距离

  • 复合属性,可以利用-形成单一属性值(top,right,buttom,left)

  • 合写成padding属性,四值法(上,右,下,左);三值法(上,左右,下);二值法(上下,左右);单值(上下左右)

  • 层叠法:先统一设置,然后在单一修改

border:内边距外面的边界区域,盒子实体化最外层
  • border-width宽度:类似padding
  • border-style 形状
    • none:定义无边框
    • solid:定义实线
    • dashed:定义虚线,在大多浏览器呈现实线
  • border-color 颜色
margin:设置盒子和盒子之间的距离
  • 可以设置四个方向单一属性和复合写法
  • 不可以设置样式

盒模型应用实例

清除默认样式

大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响,为避免默认样式对整体布局效果影响,一定要清除默认样式.

  • 清除盒子之间的边距,大的工程清除使用具体标签进行清除
*{margin:0;padding:0}
  • ul,li中的默认样式清除
ul,li{list-style:none}
  • a标签的样式清除
a{color:#333;text-decoration:none}
  • h标题标签,b,strong加粗标签的清除
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;}
height应用

设置内容的高度,如果没有设置则根据内容高度来撑开

  • 必须设置高度

    • 设计图中的盒子高度占位固定的,后面同级元素在高度下面进行加载

    • 在内部元素内容超过盒子设定宽度的时候,只会溢出但不会影响后面内容的显示,这里就需要overflow属性

      visible:溢出部分显示 hidden: 溢出部分隐藏

      scroll:溢出部分出现滚动条,不管有没有溢出都会有滚动条

      auto:自动的,没有溢出显示正常,溢出则有滚动条

  • 必须不设置高度

    • 盒子高度必须自适应内部内容的高度,或者height设置为auto属性

居中

文本的水平居中
text-align:center
文本的垂直居中
  • 单行文本的垂直居中
line-height:行高
  • 多行文本的垂直居中,让元素高度自适应或者正好等于多行文字的高度,设置元素内边距上下值相同
padding:10px 0;
元素的垂直居中
  • 类似于多行文本的方法,父盒子高度由子盒子高度撑开,给父盒子设置上下的padding,就可以实现子盒子的高度居中
元素的水平居中
  • 给独占一行的子盒子设置margin,上下随意0,左右相同保持平衡把中间元素挤到中间(只有父盒子宽度大于子盒子)
margin:0 auto

父子盒模型

我们希望父盒子的所有子盒子都能在一行显示,就必须保证所有子元素的宽度加在一起不能大于父元素的宽度

父元素的width≥所有子元素的width+padding+border+margin

  • 解决子元素超出父元素的情况,一种是精准计算,控制子元素的宽度总值
  • 盒模型自动内减
    • 必须是独占一行的元素
    • 宽度不设置,用子盒子自动填充满父盒子

margin塌陷现象

在垂直方向如果有两个元素的外边距有相遇,浏览器真正加载处理啊的不是两个间距的和,而是两个间距中较大的哪一个,边距小的塌陷到了大的内部。

父子元素margin塌陷,设置了margin-top,父子盒子的margin也会进行

解决方法:

  • 同级元素的垂直方向间距可以单独设置给一个元素,不进行拆分

  • 父子标签塌陷,不要用margin去踹,直接用padding去挤子标签的位置


标准文档流

在HTML元素中,元素排版布局过程中,元素会默认从左往右,从上往下的流式排布,前面的内容发生了变化,后面的位置也会相应发生变化。

微观现象
  • 空白折叠现象
  • 文字类元素排在一行会出现高低不齐、底边对齐效果
  • 一行内容如果写满了会自动换行
元素等级
  • 块级元素:大部分容器级标签
    • div、h1
    • 可以设置宽高,在浏览器正常显示
    • 必须独占一行,不与其他标签并排一行
    • 不设置宽度会撑满父级的width,不设置高度会被内容自动撑开
  • 行内元素:大部分的文本级标签
    • span、a、b
    • 没有办法加载宽高,无法正常显示padding,都是被内部的内容自动撑开
    • 可以和其他行内、行内块元素并排一行
  • 行内块元素
    • img、Input
    • 可以设置宽高,不设置会被原始尺寸加载要么被内容撑开
    • 可以和其他行内元素、行内块元素并排一行显示
    • 依旧存在空白折叠现象
显示模式display

可以通过属性值更改一个标签的显示模式,加载对应元素等级
在这里插入图片描述

display属性并没有改变标准文档流本质,页面还是只能从上往下,存在空白折叠的微观现象,要想实现更多页面布局必须脱离标准流的限制,使用浮动、绝对定位、固定定位


浮动

让元素脱离标准流,同一级的浮动元素可以并排在一排显示

float:left/right
性质
  • 浮动元素行块二象性,不会有空白折叠现象

  • 浮动元素依次贴边,情况距离

    • 如果一排可以放下,就依次贴边放入元素
    • 如果最后一个元素放不下,会依次向前进行贴边
    • 如果前面的高度没有给出可以贴边的高度,就再次向前贴边
    • 可以使用贴边来制作平均分别表格效果、导航栏效果、常见的电商企业网络布局
  • 浮动元素没有margin塌陷现象

  • 浮动元素会让出标准流的位置

    • 浮动元素会压盖未浮动元素
    • IE6中不兼容水平排列
    • 字围现象可以使用浮动
存在的问题
  • 子元素在浮动之后就撑不开父盒子

  • 浮动的元素会影响到后面浮动的元素

    清除浮动的方法

  • 给标准流的父亲强制性给一个高度(但是一旦子盒子高度发生变化后,现象和之前的一样没有变化)

  • clear属性清除元素自身受到前面浮动的影响(margin)属性会受到影响,显示不出来,left、right、both分别清除

  • 隔墙法(外墙),中间加一个div设置clear属性,并且添加一个height来添加margin的值属性

  • 隔墙法(内墙),将这个div添加到每个盒子的内部,就可以实现父盒子的高度自定义,是由div强行拉开的(添加了无效的html标签)

  • 避免冗余的HTML标签,可以使用伪类

伪类选择器:通过u案中的标签添加伪类,去选中标签的某个状态或位置

:after//表示选中某个标签内部最后的位置

将伪类添加给一个选中父盒子的选择器后面,一般给需要清除浮动的父盒子设置一个clearfix的类名

.clearfix:afer{
  content:"1";//添加一个文本内容撑开
  display:block;//将文本级转换为块级
  height:0; //不使用1来撑高
  clear:both;//清除前面的浮动影响
  visibility:hidden;//隐藏但是位置还占着
}
  • 溢出隐藏,解决浮动的所有问题
overflow:hidden;

在不设置高度的情况下,同时设置了溢出隐藏,浏览器在加载盒子的时候遇到溢出,会强制性去检索内部子元素的高度,无论子盒子是浮动的还是标准流的,都会将最高高度作为父盒子高度,并且不会影响后面的浮动盒子。


伪类

概念

不需要给标签添加任何属性,书写伪类必须搭配其他选择器使用,伪类选择器的样式不一定能加载到浏览器上,只有当用户触发了相应的行为才会立即被加载。伪类权重和类一样。

a标签的伪类

标签可以根据用户行为不同,划分为四种状态,设置成不同的样式效果,用户触发行为,就可以加载对应的样式

a:link{}//访问前状态
a:visited{}//访问后状态
a:hover{}//鼠标悬浮状态
a:active{}//鼠标点击状态
  • 该标签上可能会同时触发2到3个状态,相同属性之间会发生层叠,伪类权重是相同的,只能通过设置书写顺序规定,后写的层叠先写的

  • 实际应用,访问前后的状态一样的效果,只关注鼠标放上的效果


背景属性

background-color背景颜色
  • 在盒子区域(border内)添加背景颜色的修饰
  • 属性值:颜色名、颜色值
background-image背景图片
  • 给盒子(border以内)添加背景图片
  • 属性值:url图片路径
  • 当设置为不重复时,是不包含border区域
background-repeat背景重复

一定要搭配背景图进行使用

在这里插入图片描述

background-position背景定位
  • 用于设置不重复的图片在背景区域加载的开始位置
  • 属性值有三种写法:单词表示法,像素表示法,百分比表示法
  • 两个值
    • 水平方向的位置
      • left center right
      • 针对原点水平位移距离(正右)
      • 百分值相当于盒子的宽度减去图片的宽度后进行百分显示移动
    • 垂直方向的位置
      • top center bottom
      • 针对原点垂直方向距离(正下)
background-attachment背景附着
  • 设置body背景图片是否随着页面或者盒子的滚动而滚动
    在这里插入图片描述
综合写法
background:background-image repeat position attachment color//五个位置都可以相互转换
  • 不写的属性将采用默认样式
  • 如果想要层叠综合一部分,就使用单一属性进行层叠
背景应用
  • 背景图替换插入图

    <h1><a href="#">淘宝网</a></h1>
    h1 a{
     background:url();
     font-size:0;//不兼容问题,就采用text-indent:-15px,让文字脱离宽度范围内
     overflow:hidden//超出部分则直接隐藏
    }
    
    • h1标签的权重最高,一般在内部书写最重要的内容,比如最大的标题等,提高SEO是搜索排名
    • 在h1内部添加背景图
  • padding区域背景图

    li{
      padding-left:25px;
      background:url() no-repeat
    }
    
    • 在一个盒子中有背景图部分,也有文字内容,文字让开背景图区域进行加载
    • padding四个方向都可以用于添加背景图
  • 精灵图

    • 一个网页如果图像过多,服务器会频繁接收和发送请求,大大降低页面的加载速度,减少服务器任务,出现了精灵图技术(CSS雪碧图)
    • 将一个页面涉及到的小图全部放在一张大图中,将大图应用于网页,当用户访问该页面,只需向服务器发送一次请求,网页中的背景图像即可全部展现
    • 注意事项
      • 一般都是小的修饰样式,插入的图片不能往上放
      • 精灵图的宽度取决于最宽的那个背景图片标签宽度
      • 每个图片之间必须留足够的空白,保证图片加载到标签内的时候不会出现多于内容
CSS新增样式属性
  • 背景半透明样式,颜色值增加了rgba模式,最后一个值表示透明度,透明度alpha取值范围在0-1之间

  • 背景缩放 background-size设置背景图的尺寸,在移动web开发中做屏幕适配应用广泛

在这里插入图片描述

  • 多背景图,先写的在最上面,后写的在下面

定位概述

position属性值+偏移量属性

  • 相对定位relative
  • 绝对定位 absolute
  • 固定定位 fixed
相对定位relative
  • 性质(原位留坑,形影分离) 相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置

  • 参考元素是自身,偏移值的正值表示和属性值相反

  • 应用:

    • 在子绝父相情况下不随意让出位置
    • 在占有原始位置的情况下,对加载效果区进行微调设置
绝对定位absolute
  • 参考元素:参考的是距离最近的有定位的祖先元素,如果祖先都没有定位,参考body
    • 有top参与,参考点就是body页面的左上顶点和右上顶点,自身对比的是盒模型的最外面的左上角或右上角
    • 有bottom参与的,参考点是body页面首屏的左下顶点或右下顶点,并且一般不会以body作为参考元素
    • 参考祖先级
    • 参考的祖先元素中有任意定位的,在HTML结构中距离目标最近的祖先
  • 性质:绝对定位元素脱离标准流,会让出标准流的位置,设置宽高,也可以随时定义位置,不设置宽高只能被内容撑开
  • 绝对定位的参考元素是不固定的,不同的参考元素和不同偏移量会导致绝对定位元素的具体位移不同
固定定位fixed
  • 参考元素位浏览器窗口,跟偏离量组合方向有关,由于浏览器窗口是固定不变的,所以fixed的元素位置是不变的
  • 性质:脱离了标准流,让出了位置,可以设置宽高,根据偏移量可以任意设置在浏览器窗口的位置
具体应用
  • 压盖效果,绝对定位脱离标准流,并且不占用位置,效果佳

    • 压盖顺序,定位的元素不区分定位类型,都会去压盖标准流或浮动的元素

    • 如果都是定位的元素,则后写的会压盖住先写的

    • 自定义压盖顺序:z-index

      • 数字越大的 会压盖住数字小的
      • 如果都定义了自定义相同,后写的压盖先写的
      • 只有给定位的元素添加才会生效
    • 父子盒模型进行了定位,与其他父子级有压盖部分

      • 父级盒子,不设置z-index,后写的压盖先写的,设置了,值大的压盖值小的

      • 子级盒子,如果父级没有设置z-index,子级值大的压盖值小的,“从父效应“。

  • 居中,首先设置它的left:50%处于中线位置,相对定位

    ​ 居中元素设置一个margin-left:负宽一半拉过去

扩展:在标准流下实现大盒子在小盒子中的居中显示,就可以采用相对居中的方法;不改变原始浮动状态,利用相对定位居中方法


位置,可以设置宽高,根据偏移量可以任意设置在浏览器窗口的位置

具体应用
  • 压盖效果,绝对定位脱离标准流,并且不占用位置,效果佳

    • 压盖顺序,定位的元素不区分定位类型,都会去压盖标准流或浮动的元素

    • 如果都是定位的元素,则后写的会压盖住先写的

    • 自定义压盖顺序:z-index

      • 数字越大的 会压盖住数字小的
      • 如果都定义了自定义相同,后写的压盖先写的
      • 只有给定位的元素添加才会生效
    • 父子盒模型进行了定位,与其他父子级有压盖部分

      • 父级盒子,不设置z-index,后写的压盖先写的,设置了,值大的压盖值小的

      • 子级盒子,如果父级没有设置z-index,子级值大的压盖值小的,“从父效应“。

  • 居中,首先设置它的left:50%处于中线位置,相对定位

    ​ 居中元素设置一个margin-left:负宽一半拉过去

扩展:在标准流下实现大盒子在小盒子中的居中显示,就可以采用相对居中的方法;不改变原始浮动状态,利用相对定位居中方法


更多精彩内容不要错过:
H5&C3知识重构

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值