前端CSS学习小总结

古怪weird

已于 2022-08-15 17:53:04 修改

阅读量680

点赞数 1

文章标签：开发语言 css3 前端

于 2022-08-06 16:24:13 首次发布

本文链接：https://blog.csdn.net/qq_51878644/article/details/126194525

版权

文章目录

前言

一、CSS简介

1、CSS概念

2、CSS 规则主要的构成部分

3、css样式引入三种方法：

4、 css选择器

二、CSS常见属性

1、字体属性

2、背景属性

3、文本属性

4、表格属性

三、弹性盒子

1、CSS3弹性盒内容:

2、父元素上的属性:

3、子元素上的属性:

四、脱离文档流

1、文档流

2、如何脱离文档流

A 浮动

B 定位

五、CSS3新特性

六、笔记总结

前言

大二暑假在家，由于之前在学校做课设的时候，自己想做好看的界面，但总是在样式上调试很久，参考网上代码时也有些地方看不懂，想着系统复习和学习一下前端知识，希望能在以后的项目里熟练地写出好看的界面。为了记录我的学习过程也方便我以后查看，于是就有了在CSDN上写博客的想法。这篇是关于CSS的总结！

一、CSS简介

1、CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。

2、CSS 规则主要的构成部分

选择器，以及一条或多条声明（样式）。

3、css样式引入三种方法：

a 、内联样式：

要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性，缺乏整体性和规划性，不利于维护，维护成本高。

<p style="background: orange; font-size:24px;">CSS<p>

b 、内部样式：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱。

<head>

<style>

h1 {

background: red;

}

</style>

</head>

c、外部样式:

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部。

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

4、 css选择器

a 、全局选择器：可以与任何元素匹配，优先级最低，一般做样式初始化

*{

margin: 0;

padding: 0;

}

b、元素选择器：选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

p{

        font-size:14px;

}



注意：

         1 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等

         2 无论这个标签藏的多深，一定能够被选择上

3 选择的所有，而不是一个

c、类选择器：规定用圆点 . 来定义，针对你想要的所有标签使用。

<h2 class="oneclass">你好</h2>

/*定义类选择器*/

.oneclass{

width:800px;

}

class属性的特点：

1 类选择器可以被多种标签使用

2 类名不能以数字开头

3 同一个标签可以使用多个类选择器。用空格隔开

d、 ID选择器： 针对某一个特定的标签来使用，只能使用一次。css 中的 ID选择器以 #来定义。

<h2 id="mytitle">你好</h2>

#mytitle{

border:3px dashed green;

}

特别强调：

1 ID是唯一的

2 ID不能以数字开头

选择器的优先级：优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

e、关系选择器

1 后代选择器定义：选择所有被E元素包含的F元素，中间用空格隔开：E F{}

<ul>

<li>宝马</li>

<li>奔驰</li>

</ul>

<ol>

<li>奥迪</li>

</ol>

ul li{ color:green; }

2 子代选择器定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示：E>F{}

<div>

<a href="#">子元素1</a>

<p> <a href="#">孙元素</a> </p>

<a href="#">子元素2</a>

</div>

div>a{ color:red; }

3 相邻兄弟选择器定义：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择：E+F{}

<h1>h1元素</h1>

<p>第一个元素</p>

<p>第二个元素</p>

h1+p{

color:red;

}

4 通用兄弟选择器定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择：E~F{}

h1~p{

color:red;

}

二、CSS常见属性

1、字体属性

CSS字体属性定义字体，颜色、大小，加粗，文字样式

color：规定文本的颜色

div{ color:red;}

div{ color:#ff0000;}

div{ color:rgb(255,0,0);}

div{ color:rgba(255,0,0,.5);}

font-size：设置文本的大小

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

ps：chrome浏览器接受最小字体是12px

font-weight：设置文本的粗细

值描述

bold 定义粗体字符

bolder 定义更粗的字符

lighter 定义更细的字符

100~900 定义由细到粗 400等同默认，而700等同于bold

H1 {font-weight:normal;}

div {font-weight:bold;}

p {font-weight:900;}

font-style：指定文本的字体样式，normal 默认值，italic 定义斜体字

font-family：font-family属性指定一个元素的字体，每个值用逗号分开，如果字体名称包含空格，它必须加上引号。

font-family:"Microsoft YaHei","Simsun","SimHei";

2、背景属性

属性描述

background-color 设置背景颜色

background-image 设置背景图片

background-position 设置背景图片显示位置

background-repeat 设置背景图片如何填充

background-size 设置背景图片大小属性

background-repeat属性：该属性设置如何平铺背景图像

值          说明

repeat 默认值

repeat-x          只向水平方向平铺

repeat-y          只向垂直方向平铺

no-repeat        不平铺

background-size属性：该属性设置背景图像的大小

值                          说明

length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，

如果只是设置一个，第二个值auto

percentage        计算相对位置区域的百分比，第一个值宽度，第二个值高度，

                                          如果只是设置一个，第二个值auto

cover （推荐）保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小

contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

3、文本属性

text-align：指定元素文本的水平对齐方式

值                  描述

left 文本居左排列，默认值

right                 把文本排列到右边

center                把文本排列到中间

text-decoration: 属性规定添加到文本的修饰，下划线、上划线、删除线等

值              描述

underline         定义下划线

overline 定义上划线

line-through         定义删除线

text-transform: 属性控制文本的大小写

  值         描述

captialize          定义每个单词开头大写

uppercase      定义全部大写字母

lowercase      定义全部小写字母

text-indent          属性规定文本块中首行文本的缩进 p{text-indent:50px; }

4、表格属性

表格边框：指定CSS表格边框，使用border属性

table, td { border: 1px solid black; }

折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }

表格宽度和高度：width和height属性定义表格的宽度和高度
表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

表格颜色：下面的例子指定边框的颜色，和th元素的文本和背景颜色

table, td, th {

                        border:1px solid green;

                 }

td {

         background-color:green;

        color:white;

        }

三、弹性盒子

1、CSS3弹性盒内容:

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素。

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

<style>

.flex-container {

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</style>

ps:默认弹性盒里内容横向摆放

2、父元素上的属性:

1 display                 开启弹性盒。display:flex; 属性设置后子元素默认水平排列

2 flex-direction        flex-direction 属性指定了弹性子元素在父容器中的位置

                               flex-direction: row | column （从左到右排列、纵向排列）

3 justify-content      内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿

                               着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center （居左、居右、居中）。

4 align-items   align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 align-items: flex-start | flex-end | center（居上、居下、居中）。

3、子元素上的属性:

flex属性：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间默认为0，即如果存在剩余空间，也不放大如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%。

.container{

width: 500px;

height: 500px;

background-color: #555;

display:flex; //设为弹性盒子

flex-direction: row; //子元素在该盒子中从左到右排列

justify-content: center; //水平居中

align-items: center; //纵向居中

}

.box1{

width: 100px;

height: 100px;

background-color: red;

flex:3;

}

.box2{

width: 100px;

height: 100px;

background-color: green;

flex:1;

}

.box3{

width: 100px;

height: 100px;

background-color: blue;

flex:1;

}

效果展示：

四、脱离文档流

1、文档流

a、简介：文档流也称标准流，是文档中可显示对象在排列时所占用的位置/空间。

例如：块元素自上而下摆放，内联元素，从左到右摆放

b、限制：标准流里面的限制非常多，导致很多页面效果无法实现

1 高矮不齐，底边对齐

2 空白折叠现象：

a 无论多少个空格、换行、tab，都会折叠为一个空格

b 如果我们想让img标签之间没有空隙，必须紧密连接

2、如何脱离文档流

使⼀个元素脱离标准文档流有两种方式：浮动和定位。

A. 浮动

1 浮动的定义：float 属性定义元素在哪个方向浮动，任何元素都可以浮动，left 元素向左浮动，right 元素向右浮动。

2 浮动的原理：脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

a、浮动以后使元素脱离了文档流

b、浮动只有左右浮动，没有上下浮动

3 浮动副作用：

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动

1 浮动元素会造成父元素高度塌陷

2 后续元素会受到影响

4、清除浮动：解决方案有很多种

<body>

<div class="container">

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>

<div class="text"></div>

</body>

1 父元素设置高度 ：父元素设置高度如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

<style>

.container{

width: 500px;

height: 110px; // 父元素设置高度

background-color: #888;

}

.box{

width: 100px;

height: 100px;

background-color: aqua;

margin: 5px;

float: left;

}

.text{

width: 100px;

height: 100px;

background-color: blueviolet;

}

</style>

2 受影响的元素增加clear属性 ：给受影响的元素设置：clear:both ;

<style>

.container{

width: 500px;

background-color: #888;

}

.box{

width: 100px;

height: 100px;

background-color: aqua;

margin: 5px;

float: left;

}

.text{

width: 100px;

height: 100px;

background-color: blueviolet;

clear: both;// 受影响的元素增加clear属性

}

</style>

3 overflow清除浮动 ：如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮这种情况下，父布局不能设置高度。父级标签的样式里面加:overflow:hidden;clear: both;

<style>

.container{

width: 500px;

background-color: #888;

overflow: hidden; //overflow清除浮动

clear: both; //overflow清除浮动

}

.box{

width: 100px;

height: 100px;

background-color: aqua;

margin: 5px;

float: left;

}

.text{

width: 100px;

height: 100px;

background-color: blueviolet;

}

</style>

4 伪对象方式 ：如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理为父标签添加伪类 after ,设置空的内容，并且使用 clear:both ;这种情况下，父布局不能设置高度。

<style>

.container{

width: 500px;

background-color: #888;

}

.container::after{ // 伪对象方式

content: " ";

display: block;

clear: both;

}

.box{

width: 100px;

height: 100px;

background-color: aqua;

margin: 5px;

float: left;

}

.text{

width: 100px;

height: 100px;

clear: both;

background-color: blueviolet;

}

</style>

</head>

<body>

<div class="container">

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>

<div class="text"></div>

</body>

B、定位：

定义position 属性指定了元素的定位类型

值描述

relative 相对定位

absolute 绝对定位

fixed 固定定位

其中绝对定位和固定定位会脱离文档流。设置定位之后：可以使用四个方向值进行调整位置： left、top、right、 bottom。

// 相对定位

<div class = "box" ></div>

.box {

width : 200px ;

height : 200px ;

background-color : red ;

position : relative ;// 没有脱离文档流

left : 100px ;// 相对父元素或上级的左边相距100px，随着上级的变化而变化

}

//绝对定位

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

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

.box1 {

width : 200px ;

height : 200px ;

background-color : red ;

position : absolute ;// 脱离了文档流

left : 50px ;// 相对父元素或上级的左边相距50px，随着上级的变化而变化

}

.box2 {

width : 300px ;

height : 300px ;

background-color : green ;

}

// 固定定位

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

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

.box1 {

width : 200px ;

height : 200px ;

background-color : red ;

position : fixed ;// 脱离了文档流

left : 50px ;// 固定在距离页面左边的50px处

}

.box2 {

width : 300px ;

height : 300px ;

background-color : green ;

}