【前端基础】CSS的核心属性(简洁版)

Digital_Spring
102 阅读13分钟

1. 文本相关属性

属性描述说明
1font-size字体大小单位可以是px，pt，em等 12pt=16px 1em=16px
浏览器默认是16px,设计图常用最小字号是12px
2color颜色color:red; color:#ff0; color:rgb(255,0,0); 0-255
3font-family字体当字体是中文字体、英文字体中有空格时，需加双引号；
多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推
4font-weight加粗font-weight:bolder;(更粗的)
bold（加粗）
normal（常规）
font-weight:100-900; 100-300偏细一些 400-500 常规 600-900加粗
5font-style倾斜font-style：italic(斜体字)
oblique(倾斜的文字)
normal（常规显示）;
6text-align文本水平对齐text-align:left; 水平靠左
text-align：right；水平靠右
text-align：center；水平居中
text-align:justify;水平2端对齐，但是只对多行起作用。
7line-height行高line-height的数据=height的数据，可以实现单行文本垂直居中
8font文字简写font是font-style font-weight font-size
line-height font-family 的简写。
font:italic 800 30px/80px "宋体"；顺序不能改变
,必须同时指定font-size和font-family属性时才起作用
9text-decoration文本修饰text-decoration:none;没有
underline下划线
overline上划线
line-through删除线
10text-indent首行缩进text-indent可以取负值；
text-indent属性只对第一行起作用
11letter-spacing字间距控制文字和文字之间的间距

2. 背景相关属性

属性描述说明
1background-color背景颜色background-color：red；
2background-image背景图片background-image:url();
3background-repeat背景图片的平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y；
4background-position背景图片的定位background-position：水平位置 垂直位置；可以给负值
5background-attachment背景图片的固定background-attachment : scroll (滚动)
fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了） ;

可以简写成 | background

div{background:400 14px/2 "微软雅黑";}

3. 列表相关属性

属性描述说明
1list-style列表属性的简写list-style:none; 去除列表符号

4. CSS属性的继承

CSS的继承性是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。 具有继承性的相关属性：font-family,font-size, font-style, font-weight, font, letter-spacing,line-height，text-align,text-indent，list-style等

5. 浮动相关属性

5.1 CSS的浮动属性

属性描述说明
1floatfloat：left；元素靠左边浮动
2floatfloat：right；元素靠右边浮动
3floatfloat：none；元素不浮动

浮动的作用1：定义网页中其它文本如何环绕该元素显示 浮动的作用2： 就是让竖着的东西横着来

5.2 CSS的清除浮动

属性描述说明
1clearClear：none；允许有浮动对象
2clearClear：right；不允许右边有浮动对象
3clearClear：left；不允许左边有浮动对象
4clearClear:both;不允许有浮动对象

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置.

6. 标准盒子模型

盒子模型的组成 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是标准盒模型。

image-20231202205043297.png

7. margin属性

在网页布局中经常有很多盒子需要设置之间的间距可以使用margin设置外边距

  1. 属性：margin
  2. 作用：主要是用来设置同级元素之间的位置关系
  3. 外边距使用的特点 ● 属性值要设置为数值加单位 ● 属性值的设置方法 ○ 四个值：上 右 下 左 {margin:0px 0px 0px 40px;} ○ 三个值：上 左右 下 {margin:10px 20px 30px ;} ○ 二个值：上下 左右 {margin:10px 20px ;} ○ 一个值：四个方向 margin:2px;/*定义元素四周填充为2px*/ ● 属性值还可以设置某一个方向
    • margin-top 顶部间距
    • margin-right 右侧间距
    • margin-bottom 底部间距
    • margin-left 左侧间距
  4. 常见的固定搭配 ● *{ margin：0；padding：0 } 清除浏览器的默认间距 ● 版心的选择器{ margin：0 auto } 设置版心居中
  5. 外边距margin的常见bug ● 两个盒子上下排列,分别设置margin-top/bottom的时候，会错误的取之间的最大值 ● 如果父级元素下面只有一个子级元素的时候，给自己元素设置margin-top会错误的解析到父级元素.

margin相关问题以及解决方法：

  1. margin-top的解析 现象：默认情况下在包含结构里面,给子元素添加了margin-top之后，父元素会跟着一起下来。 解决方法：A、给最近的父元素添加border-top:1px solid transparent;透明上边框 B、给父元素添加overflow:hidden;（溢出隐藏) C\ 给父元素或者子元素添加浮动
  2. margin的上下间距重叠问题 现象：2个上下并列结构的时候,如果给上面的盒子添加了margin-bottom,同时给下面的盒子添加了margin-top,此时应该解析的垂直间距是2者之和,但是浏览器解析的时候,会按照最大数值去解析。 解决方法：A、给下面的盒子添加父元素且添加声明overflow:hidden;

8. padding属性

在网页布局中经常需要设置盒子和盒子里面的内容的间距可以使用padding设置内边距

  1. 属性：padding
  2. 作用：主要是用来设置父级和子级元素之间的位置关系
  3. 内边距使用的特点
  • 属性值要设置为数值加单位
  • padding添加的位置
    • 可以添加在父级元素上(控制所有的子级元素都会移动位置)
    • padding会撑大当前父级元素的宽高大小，为了不影响后面的布局需要在初始宽高上减去相应的padding值
    • 可以添加在子级元素上(控制单个子级元素的位置)
    • padding会撑大当前子级元素的宽高大小
  • 属性值的设置方法
    • 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/
    • 两个值：上下 左右 {padding:10px 20px ;}
    • 三个值：上 左右 下{padding:10px 20px 30px ;}
    • 四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
  • 属性值还可以设置某一个方向
    • padding-top 顶部间距
    • padding-right 右侧间距
    • padding-bottom 底部间距
    • padding-left 左侧间距

说明：padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

9. border属性

拆开写法:

  • 边框宽度：border-width:
  • 边框颜色：border-color:
  • 边框样式：border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
  • 简写： border：30px solid blue;参数的顺序可以随意调换
  • 单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left右 border-right
  • IE盒子模型(怪异盒模型) 在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)

image-20231202210035426.png

CSS3指定盒子模型种类 box-sizing属性可以指定盒子模型种类，content-box·指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。 box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。在这种解析模式下添加padding或者border不会再把盒子撑大

10. 文本溢出和元素类型

10.1 文本溢出设置

要实现单行文本溢出时产生省略号的效果还需定义：

  1. 容器宽度：width：value；
  2. 强制文本在一行内显示:white-space：nowrap;
  3. 溢出内容为隐藏：overflow：hidden；
  4. 溢出文本显示省略号：text-overflow：ellipsis;

Overflow属性

属性描述
1overflow:visible;visible:默认值，内容不会被修剪，会呈现在元素框之外；
2overflow:hidden;hidden：内容会被修剪，并且其余内容是不可见的；
3overflow:auto; auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
4overflow:scroll;scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

10.2 元素类型分类

元素类型的分类，依据CSS的显示

块元素(block element)行内（内联）元素行内块元素
A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。
C）块状元素都可以定义自己的宽度和高度。
D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子		A) 内联元素的表现形式是始终以行内逐个进行显示； 横着排
B) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效		内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
例如：div p ul li ol`` li`` dl dt dd h1-h6等例如：a b em i span strong等例如：img input等

10.3 元素类型的转换

元素类型之间的转换 display

属性说明
1display：block；把元素转换成块
2display：inline；把元素转换成行内
3display：inline-block；把元素转换成行内块
4display：none； 隐藏
5display：list-item; li标签默认的display属性值

display的属性值有18个属性值，甚至更多，display：table-header-group/table-footer-group/flex inline-flex/table/table-cell/table-caption.......

10.4 垂直对齐属性

垂直对齐 vertical-align:只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性

属性说明
1vertical-align：baseline；默认值 baseline基线
2vertical-align：middle；垂直在line-height范围居中对齐
3vertical-align：top；垂直方向上在line-height的顶端对齐
4vertical-align：bottom；垂直方向上在line-height的底端对齐
5vertical-align：text-top；垂直方向上在文字的顶线对齐
6vertical-align：text-bottom；垂直方向上在文字的底线对齐

11. 定位锚点透明

11.1 Position定位相关属性值

  1. 如果position 属性为absolute ，包含块就是由它的最近的 position的值不是 static（也就是值为fixed, absolute, relative或sticky）的祖先元素。
  2. 如果position 属性是fixed，包含块是 viewport（视口）浏览器当前窗口。
定位
语法说明文档流偏移参考物
1position:stabic;默认值默认默认.静态定位
2position:absolu;绝对定位脱离A）当没有父元素或者父元素没有定位，参考物是浏览器窗口的第一屏 B）有父元素且父元素有定位，父元素
3position:relative;相对定位不脱离自己的初始位置
4position:fixed;固定定位脱离浏览器当前窗口（视口）
5position:sticky;粘性定位脱离是相对定位和固定定位的集合体，可以做吸顶效果，粘性定位是CSS3.0新增加的，兼容不好

11.2 锚点链接

命名锚点链接的应用

  • 定义：

    • 是网页制作中超级链接的一种，又叫命名锚记。

  • 命名锚点的作用：在同一页面内的不同位置进行跳转。（百度百科）

  • 制作锚标记：

    • 1)给元素定义命名锚记名 语法：<标记 id="命名锚记名"> </标记>
    • 2)命名锚记连接 语法：<a href="#命名锚记名称"></a>

11.3 透明属性

  • IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100
  • 兼容其他浏览器写法：opacity:0.value;
  • (value的取值范围 0-1 0.1,0.2,0.3-----0.9---1)

12. 宽高自适应

  • 自适应的概念 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示
  • 宽度自适应方式 1、宽度不写 2、宽度的单位不用px，用相对单位比如%； 3、用min-width、max-width设置。 用在响应式布局上
  • 高度自适应方式 1、高度不写， 存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷) 2、高度的单位不用px，用相对单位比如%； 如果希望相对于窗口的话，默认情况下，height用%是不生效的，需要给 body,html{height:100%;} 3、用min-height、max-height设置。
  • 产生条件： 所有的子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷。
  • 解决方法： hack1：给父元素添加声明overflow:hidden; hack2：在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both;} hack3:万能清除浮动法 给父元素 父元素:after{content:".";clear:both;display:block; visibility:hidden;}

13. 伪对象选择器

伪对象（伪元素）选择器的权重是1

个数选择器语法说明
1::afterdiv::after{content:”文字”}
div:after{content:url();}		与content属性一起使用，定义在对象后的内容
2::before div::before{content:”文字”}
div:before{content:url();}		与content属性一起使用，定义在对象前的内容
3::first-letterdiv::first-letter
div:first-letter 		定义对象内第一个字符的样式，注：该伪元素只能用于块元素
4::first-linediv::first-line
div::first-line		定义对象内第一行的样式，注：该伪元素只能用于块元素
5::selectiondiv::selection选中之后的样式 只支持这background color属性

版权声明：本文为本博主在CSDN账号「Ein hübscher Kerl.」的首发原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
本文链接：blog.csdn.net/qq_54026286…

END

avatar
文章
阅读
粉丝