CSS核心样式及应用(一)

作者: 琳琳酱吖 | 来源:发表于2020-10-24 17:27 被阅读0次

CSS核心样式

在学习了html和css的基础之后，接下来开始学习css的核心样式语法及其应用。
在学习中我们不仅要悉知css的样式语法，如何去使用css让页面达到我们想要的结果。也要知道在css一些属性在浏览器加载中，可能遇到的兼容性问题和遗留的问题。

css常用样式-字体属性

粗细 font-weight
字体风格 font-style
行高 line-height
字体综合属性 font

粗细 font-weight

作用：设置文字是否加粗显示。
属性名：font-weight,属于font属性的一个单一属性。
属性值：单词类型、数字类型。

单词类型

属性值	说明
normal	默认，标准字体
bold	粗体字体，b、strong标签的默认值
bolder	更粗体的字体
lighter	更细体的字体

数字类型

100~900 之间的整百数字。数字越大，文字越粗。
400等价于normal,700等价于bold。

字体风格 font-style

作用：设置字体是否倾斜显示。
属性名：font-style，属于font属性的一个单一属性。
属性值：单词。

属性值	说明
normal	设置正规字体，大多数标签的默认值
italic	设置斜体字体，主要针对英文，要求英文以字体的斜体样式显示
oblique	设置斜体字体，只是将文字倾斜显示，与字体无关

行高 line-height

作用：设置一行为实际占有的高度，文字字号在行高中垂直居中。
属性名：line-height，属于font属性的一个单一属性。

属性值	说明
px像素值	设置行高的具体像素值
百分比数值	设置的本身字号像素的百分比

实际应用中，行高的数值通过设计图获取。

字体综合 font

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
单一属性可进行合写，值之间用空格进行分隔。
①写法一：
font进行综合书写时，必须有字号和字体参与，且字号在字体前，不可颠倒顺序。

p {
  font: 14px "arial","宋体";
}

②写法二：
font属性经常对字体、字号和行高进行合写。书写顺序：字号、行高、字体，字号和行高之间必须用/进行分隔。

p {
  font: 14px/28px "arial","宋体";
}

③写法三：
font若需要设置加粗和斜体，这两个属性值只能写在最前面，两个值之间可进行互换。后面单一属性不可更改位置。

p {
  /* 两种书写方式效果一样 */
  font: italic bold 14px/28px "arial","宋体";
  font: bold italic 14px/28px "arial","宋体"
}

css常用样式-文本属性

水平对齐 text-align
文本修饰 text-decoration
缩进 text-indent

水平对齐 text-align

作用：设置文本水平方向对齐，无论单行或多行，都会对应方向对齐。
属性值：三个方向单词。

属性值	说明
left	居左对齐，大部分标签默认值
center	居中对齐
right	居右对齐

文本修饰 text-decoration

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

属性值	说明
none	没有修饰，大部分标签默认值
overline	上划线
line-through	中划线，删除线，`<del>`标签默认值
underline	下划线，`<a>`标签的默认值

缩进 text-indent

作用：设置段落首行是否进行缩进。

属性值	说明
px单位	表示首行缩进多少像素
em单位	首行缩进几个中文字符的位置
百分比	表示缩进文字所在标签的父级标签width属性的百分比

实际工作中，最常用是em为单位的属性值。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。

css常用样式-盒模型属性

盒模型又称为框模型，包含五个用来描述盒子位置、尺寸的属性。

宽度 width
高度 height
内边距 padding
边框 border
外边距 margin

盒模型属性中，根据不同属性效果，可划分区域：
元素内容区域：width + height
盒子可实体化区域：width + height + padding + border
盒子实际占有的位置：width + height + padding + border + margin

宽度 width

作用：设置可添加元素内容区域的宽度。

属性值	说明
auto	默认值。浏览器可计算出实际的宽度
px	设置宽度具体的像素值
%	参考父元素宽度width的百分比宽度

特殊应用
① 若一个元素不添加width属性，默认为auto，不同浏览器会自动计算出实际宽度。例如<div>元素独占一行的，会自动撑满父元素的width区域，如果是<span>元素等不独占一行的，则由内部元素的内容自动撑开宽度。
② <body>元素比较特殊，不需要设置width属性，宽度会自适应浏览器窗口宽度。

<div style="width: 500px;height:200px;background-color: red;">
  <div style="background-color: pink">
    这里独占一行的元素，并且没有设置宽度。
  </div>
  <span style="background-color: blue;">
    这里是不独占一行的元素，并且没有设置宽度。
  </span>
</div>

效果：

width属性.PNG

高度 height

作用：设置可添加元素内容的区域的高度。

属性值	说明
auto	默认值。浏览器可计算出实际的宽度
px	设置宽度具体的像素值
%	参考父元素宽度height的百分比宽度

特殊应用
若一个元素不添加width属性，默认为auto，浏览器自动计算高度。元素的高度自适应内部内容的高度。

内边距 padding

作用：设置元素边框内部到宽高区域间的距离。
特点：可以加载背景，不能书写嵌套的内容。
属性值：常用px单位为数值。
padding是一个复合属性，可根据内边距方向分为四个方向的单一属性。

单一属性

一般按照顺时针规律书写：上、右、下、左。

p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

简写

① 四值法：
设置四个属性值：上、右、下、左

p {
  padding: 10px 20px 30px 40px;
}

② 三值法：
设置三个值：上、左右、下。

p {
  padding: 10px 20px 30px;
}

③ 二值法：
设置两个值：上下、左右。

p {
  padding: 10px 20px;
}

④ 单值法：
设置一个值：上右下左，四边值相同。

p {
  padding: 10px;
}

若需要制作三边内边距相同，一边不同。
方法一：使用四值法、三值法，进行属性值设置。
方法二(推荐使用)：利用css的层叠性，先设置四边内边距相同，在后面使用单一属性写法。注意书写顺序，单一属性必须写在后面。

边距 border

作用：设置内边距外边的边界区域，作为盒子实体化的最外层。
属性值：三值组成，分为线宽度、线形状、线颜色。
boder属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分。

  p {
    border: 10px solid #f00;
  }

按属性值类型划分

线宽 border-width
作用：设置边框宽度
属性值：常用px形式数值，四个方向均有边框，类似于padding。

  p {
    border-width: 10px 20px 30px 40px;
  }

线形 border-style
作用：设置边框线形状。
属性值：形状单词，整体也类似padding的综合属性写法。

属性值	说明
none	定义无边框
solid	定义实线
dashed	定义虚线

常用属性值为以上三种，其他属性值可参考文档。
边框颜色 border-color
作用：设置边框颜色
属性值：颜色名或颜色值，整体也类似padding的综合属性写法。

  p {
    border-color: #f00 #f0f #0f0 #ff0;
  }

根据边框方向划分

上边框：border-top
右边框：border-right
左边框：border-left
下边框：border-bottom

每个单一属性都必须与复合属性border一致，设置三个属性值。

p {
  border-top: 10px solid #f00;
  border-right: 10px solid #0f0;
}

根据方向和类型

单一属性写法：border-方向-类型

注意：细分时必须先方向后类型，否则会出错。

  p {
    border-right-color: #0f0;
  }

外边距 margin

作用：设置盒子与盒子间的距离。
特点：不能渲染背景。
属性值：常用px为单位的数值。
外边距设置方式与内边距padding一摸一样。

盒模型属性的应用

清除默认样式

大部分标签都有一个在浏览器加载的默认样式，为了避免默认样式对整体布局造成的影响，一定要清除默认样式。

盒模型属性的内外边界：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符清除。
<ul>和<ol>有默认列表前缀，可用list-style:none清除样式。
<a>标签的默认样式，可设置color和text-decoration。
清除默认加粗效果：设置font-weight。

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
a {
  color: #666;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h6,strong {
  font-weight: normal;
}

由于文字样式可以被继承，所以在<body>标签中设置整体的文字样式：

body {
  color: #666;
  font-size: 14px;
  font-family: "Arial","宋体";
}

注意：并集选择器或通配符均可清除样式，但通配符会选择所有的标签，效率较低。在实际应用中，推荐使用并集选择器。

高度height应用

根据不同需求，高度属性可设置也可不设置。
如果设置了高度，盒子占有的高度位置规定死，后面同级元素会紧挨着加载；如果不设置高度，会根据标签内容高度自动撑开。

必须设置高度

要求盒子高度位置占位是固定的，后面同级元素的高度在高度下面加载。
出现的问题：自身盒子内部内容过多会溢出盒子区域。
解决方法：使用overflow属性，对溢出部分内容的显示效果进行设置。

属性值	说明
visible	默认值，溢出部分显示的
hidden	溢出部分直接隐藏，隐藏超出边框范围的内容
scroll	溢出部分出现滚动条，可拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条
auto	自动的，如果没有溢出就正常显示，如果溢出，溢出的方向会自动出现滚动条

必须不设置高度

要求盒子高度必须自适应内部内容的高度。
设置height的属性值是自动的或者不设置高度。

  div {
    height: auto;
  }

文字或元素居中

网页中经常有元素或者文字居中的效果。

文本水平居中
方法：文本水平居中，不论单行或是多行，使用text-align属性设置。
文本垂直居中
方法：单行文本垂直居中，让文字行高line-height等于盒子的高度height。
方法：多行文本垂直居中，让元素高度自适应或者正好等于多行文字的高度，再设置元素内边距上下值相同。
元素垂直居中
一个子元素在父元素中垂直居中。
方法：与多行文字类似，让父元素高度自适应，子元素自动撑开父元素的高度，再给父元素设置相同的上下边距。
元素水平居中
针对块元素样式上必须独占一行的盒子，若子盒子宽度低于父盒子宽度，可设置盒子的margin值，水平方向值都设置为auto。

注：auto只在水平方向有作用，水平方向的margin设置为auto，边距会自动无限增大，直到撑满除子元素外父元素剩余区域；因此，如果两个水平方向均为auto，为了达到平衡，两边边距相同，盒子居中显示。

  .box {
    width: 300px;
    height: 200px;
    margin: 0 auto;
  }

父子盒模型应用

一般情况下，父元素内部可放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度要足够，需要遵循设置尺寸的规律：所有子元素的宽度加起来不能大于父元素的宽度width。

父元素width>=所有子元素width+padding+border+margin

否则，多余的子元素会掉下来或溢出父元素。

解决方法一：计算量取尺寸时要准确。

解决方法二（特殊情况）：盒模型自动内减。

父盒子中只有一个子元素，且是块元素标签必须占一行的。不设置子元素的width，此时子元素的width属性会自动加载父元素的width。即使设置了子元素的padding、border和margin，也不需要手动进行内减，子元素的width会自动收缩尺寸。

margin 塌陷现象

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

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距是较大的值。

同级margin塌陷.PNG

解决方法：
如果两个元素垂直方向有间距，只需要给一个元素设置边距即可。

父子元素塌陷

① 父元素和子元素都设置了同方向的margin-top值，两个元素之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。

.demo {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: red;
}
.demo p {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  background-color: blue;
}

② 本身父元素与上个元素距离是0，子元素设置了垂直方向的上边距，会带着父级一起掉下来。

解决方法：
让两个边距不要相遇，中间可使用父元素border或padding将边距分隔开；更常用方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父级的padding挤出来。

注意：水平方向的margin没有塌陷现象。