CSS基础笔记

最新推荐文章于 2024-05-20 22:08:52 发布

এ᭄画画的北北

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量61

点赞数

分类专栏：前端学习文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46878941/article/details/126451562

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、CSS基础知识

什么是CSS：

层叠样式表，美化html

CSS的引入方式：

内部样式表：在<head>标签里添加<style>标签
外部样式表：在<head>标签里添加<link>标签内引入css文件

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

行内样式：标签内添加style=""属性

优先级：行内>内部>外部>默认

CSS基础选择器

标签选择器，例：

h1 {
    color:red;
    font-size:14px;
}

类选择器以一个点号.定义，例：

.green {
    color:green;
} /*多个类名空格隔开*/
<p class="green">...</p>

id选择器以#来定义，例：

#red {
    color:red;
} /*id用于唯一的元素*/
<p id="red">...</p>

通配符选择器以*来定义，例：

* {
    color:red;
} /*用于所有标签统一修改样式*/

CSS复合选择器

后代选择器：元素1 元素2 { 样式声明 }
子选择器：元素1>元素2 { 样式声明 }
并集选择器：元素1,元素2 { 样式声明 }
伪类选择器：使用冒号：
- 链接伪类选择器
  - a:link - 正常，未访问过的链接
  - a:visited - 用户已访问过的链接
  - a:hover - 当用户鼠标放在链接上时
  - a:active - 链接被点击的那一刻

注意：LVHA写法

:foucs伪类选择器，获得焦点元素

CSS三大特性

层叠性
- 就近原则，后来居上
继承性
- 子标签继承父标签的某些样式如text-,font-,line-,color等
优先级
- !important>行内>id选择器>类选择器>标签选择器>通配符选择器>继承

继承/通配符选择器：0,0,0,0
标签选择器： 0,0,0,1
类选择器： 0,0,1,0
id选择器： 0,1,0,0
行内： 1,0,0,0
!important ：无穷
复合选择器：权重叠加

emmet语法

生成标签：标签名+tab
多个标签：标签名*个数+tab
包含标签：标签名>标签名+tab
兄弟标签：标签名+标签名+tab
带类名/id名：标签名.类名/#id名+tab
有顺序：$
- 例：p.demo$*5，生成类名demo1~demo5
生成标签内部内容：标签名{文字}

二、CSS属性

字体样式font

font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-weight 指定文本的字体粗细 normal/400,bord/700
font-style 指定文字样式是否倾斜 normal,italic
复合形式：

{font: font-style font-weight font-size/line-height font-family}
/* font-size，font-family不可省 */

文本样式text

color 设置文本颜色 red,#ff0000,rgb(255,0,0)
text-align 文字水平对齐 left | right | center
text-indent 缩进效果，1em：1个文字大小
text-decoration 装饰文本，下划线underline，删除线line-through，取消下划线none
line-height 行高：上间距+下间距+文本高度
文字垂直居中：line-height = height

背景样式background

background-color，背景颜色，默认transparent
background-image，背景图片的url，默认none
background-repeat，背景平铺，默认repeat，可选 no-repeat | repeat-x | repeat-y
background-attachment：背景固定，默认scroll，可选fixed
background-position：x y;

x，y可以是精确单位，方位名词或混用
精确单位：第一个x，第二个y，若只指定一个一定是x坐标，另一个垂直居中
方位名词：两个前后顺序无关，省略一个另一个默认居中
水平：left | center | right
垂直：top | center | bottom

background：rgba(0,0,0,.3)最后一个参数alpha透明度0~1（CSS3）
复合写法：颜色，图片地址，平铺，滚动，位置

列表list

list-style：none，去掉小圆点

三、CSS元素显示模式

块级元素`<div> <p> <h1>`

独占一行
可以设置高度，宽度，内外边距
宽度默认为容器的100%
里面可以放块级元素或行内元素

行内元素`<span> <a> <strong> <em>`

一行可以放多个
宽度和高度不能直接设置
默认宽度为本身内容的宽度
里面只能放文本或行内元素，不能放块级元素

注：<a>里面不能再放<a>

行内块元素`<input /> <img /> <td />`

一行可以放多个
默认宽度为本身内容的宽度
可以设置高度，宽度

元素显示模式转换

转换为块级元素：display:block
转换为行内元素：display:inline
转换为行内块元素：display:inline-block

元素的显示与隐藏

display
- display：block
- display：none隐藏，不占有原来位置
visibility
- visibility：visible
- visibility：hidden隐藏，保留原来位置
overflow
- overflow：visible
- overflow：hidden，定位慎用
- overflow：scroll，滚动条
- overflow：auto在需要的时候添加滚动条

四、CSS盒子模型

盒子模型的四个组成部分

Border(边框)

border-style 用于设置元素所有边框的样式
border-top | bottom | left | right 单独地为各边设置边框样式
- solid: 定义实线边框
- dashed: 定义一个虚线边框
- dotted: 定义一个点线边框
border-width 边框宽度
border-color 边框颜色
border-collapse 表格细线边框

Content(内容)

Padding(内边距)

padding-top | bottom | left | right
padding :5px; 上下左右
padding :5px 10px; 上下左右
padding :5px 10px 20px; 上左右下
padding :5px 10px 20px 30px; 上右下左

Margin(外边距)

margin-top | bottom | left | right

盒子模型注意事项

边框会额外增加盒子的实际大小
若盒子已有大小，设置内边距会撑大盒子
如果遇到嵌套的情况，子元素没有设定宽高，则设置padding不会撑开父元素的盒子
行内元素不设置上下内外边距

外边距合并问题

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素设置了下外边距margin-bottom，下面的元素设置了上外边距margin-top，则它们之间的垂直间距并不是 margin-bottom + margin-top，而是取两个值中的较大者。所以尽量只给一个盒子添加margin值。

塌陷问题

对于两个嵌套关系（父子关系）的块元素，当父元素和子元素同时都设置了上外边距时，父元素会向下塌陷较大的外边距值，并且子元素并不会和父元素隔开，即子元素设置的上外边距没有效果。

塌陷问题的解决

父元素定义上边框
父元素定义上内边距
父元素添加overflow:hidden
浮动、固定，绝对定位的盒子不会有塌陷问题

清除内外边距：

* {
    padding:0; 
    margin:0;
}

五、浮动

为什么需要浮动

实现多个盒子(div)水平排列成一行
实现盒子的左右对齐

浮动的特性

脱标：脱离标准流，不再保留原来位置
一行内显示，顶端排列对齐，父级宽度装不下另起一行
具有行内块元素的特性
写法：float：none | left | right

浮动注意事项

浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐，
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
如果前一个兄弟盒子标准流，那么当前盒子会显示在前一个兄弟盒子的下方
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流
一个盒子里面有多个子盒子，其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

清除浮动

什么时候使用清除浮动

父级没高度
子盒子浮动了
影响下面布局了，就应该使用清除浮动

清除浮动的本质和策略

本质：清除浮动元素脱标造成的影响
策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动方法

额外标签法：在最后一个浮动的子元素后面添加一个额外标签，添加clear：both样式
父元素添加overflow:hidden
父元素添加after伪元素clearfix
父元素添加双伪元素

六、定位

为什么需要定位

某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子
滚动窗口的时候，盒子固定在屏幕的某个位置

定位模式

定位=定位模式+边偏移

static 静态定位：相当于无定位
relative 相对定位：参照自己原来的位置移动，不脱标
absolute 绝对定位：参照带有定位的父级元素来移动位置，若父元素没有定位，则以浏览器为准定位，脱标
fixed 固定定位：以可视窗口为基准，脱标，不随滚动条滚动
sticky粘性定位：以可视窗口为基准，不脱标，四个参数至少一个
边偏移
top bottom left right

子绝父相

子级绝对定位，在父级内任意摆放，不会影响其他兄弟盒子
父级相对定位，限制子盒子在父盒子内显示，需要占有位置

绝对定位的盒子居中

绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中
绝对定位的盒子居中：

.box {
    position: absolute
    left: 50%; 
    top: 50%; /*让盒子的左上角移动到父级元素的中心位置*/
    margin-left: -100px;
    margin-top: -100px; /*让盒子向左上各移动自身宽度的一半*/
    ...
}