css常见烤点

css知识点总结CSS知识点总结。

一、CSS简介。

1. 定义。

- CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML 等标记语言）文档外观和布局的样式语言。

它可以控制网页元素的样式，如颜色、字体、大小、间距、布局等。

2. 作用。

- 将内容（HTML）与表现（CSS）分离。

这使得网页的维护和更新更加容易，例如，如果要改变整个网站的字体颜色，只需要修改CSS文件中的相关样式规则，而不需要逐个修改HTML页面中的每个元素。

二、CSS的基本语法。

1. 选择器（Selector）- 元素选择器。

- 直接使用HTML元素名称作为选择器，例如`p`选择所有的`<p>`段落元素，`h1`选择所有的`<h1>`标题元素等。

- 类选择器。

- 以`.`开头，后面跟着自定义的类名。

例如`.my - class`可以选择所有带有`class = "my - class"`属性的元素。

在HTML中可以这样使用：`<div class="my - class">...</div>`。

- ID选择器。

- 以`#`开头，后面跟着自定义的ID名。

ID在一个HTML页面中应该是唯一的。

例如`#my - id`可以选择带有`id = "my - id"`属性的元素，如`<div id="my - id">...</div>`。

2. 声明块（Declaration Block）- 由一个或多个声明（Declaration）组成，每个声明包含一个属性（Property）和一个值（Value），中间用`:`分隔，声明之间用`;`分隔。

例如：p {color: red;font - size: 16px;}- 在这个例子中，`p`是选择器，`{}`内部是声明块。

css基础知识总结CSS基础知识总结CSS（Cascading Style Sheets）是一种用于描述网页上元素样式的标记语言。

它与HTML结合使用，可以控制网页的布局、颜色、字体、大小等方面的样式。

本文将对CSS的基础知识进行总结，包括选择器、属性、值、盒模型和布局等内容。

一、选择器选择器是CSS中用来选中HTML元素的一种方式。

常见的选择器包括标签选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。

标签选择器通过HTML标签名选中元素，类选择器通过元素的class属性选中元素，ID选择器通过元素的id属性选中元素，伪类选择器通过元素的特殊状态选中元素，伪元素选择器用来选中元素的特定部分。

二、属性和值CSS的属性用于描述元素的样式特征，值则用于定义属性的具体取值。

常见的属性包括color（颜色）、font-size（字体大小）、background（背景）、margin（外边距）、padding（内边距）等。

每个属性都有一组可选的值，如颜色可以是具体的颜色值（如红色、蓝色），字体大小可以是像素值或百分比等。

三、盒模型盒模型是CSS中用来描述元素在页面中所占空间的模型。

每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。

内容区域包含了实际的内容，内边距是内容区域与边框之间的距离，边框是一个可见的线条，外边距是盒子与其他盒子之间的距离。

四、布局布局是指网页中元素的排列方式和位置。

CSS提供了多种布局方式，包括流动布局、浮动布局、定位布局和弹性布局等。

流动布局是默认的布局方式，元素按照其在HTML中的顺序从上到下依次排列。

浮动布局通过将元素从正常的文档流中取出，并使其向左或向右浮动，以实现元素的排列。

定位布局通过指定元素的位置属性和偏移量来确定元素的位置。

弹性布局是一种响应式的布局方式，可以根据屏幕大小自动调整元素的排列。

五、其他常用属性除了上述基础知识外，CSS还有一些其他常用的属性。

css基础知识点总结CSS基础知识点总结CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的语言，它可以控制网页的颜色、字体、排版和其他各种外观方面的属性。

在这篇文章中，我们将总结一些CSS的基础知识点，帮助读者理解并掌握CSS的基本概念和用法。

一、选择器（Selectors）选择器是CSS中用来选择要应用样式的HTML元素的部分。

常见的选择器包括元素选择器、类选择器、ID选择器、伪类选择器等。

元素选择器通过元素的标签名选择元素，类选择器通过元素的class 属性选择元素，ID选择器通过元素的id属性选择元素，伪类选择器则用于选择具有特定状态的元素，如:hover用于选择鼠标悬停在元素上的状态。

二、属性（Properties）属性是CSS中用来控制元素外观的部分。

常见的属性包括颜色、字体、背景、边框、尺寸等。

通过为元素指定属性值，可以改变元素的外观样式。

例如，color属性用于设置文本颜色，font-family属性用于设置文本字体，background-color属性用于设置元素背景颜色，border属性用于设置元素边框样式。

三、值（Values）值是属性中可接受的具体数值或关键词。

不同的属性接受不同类型的值。

例如，color属性接受表示颜色的关键词（如red、blue）或十六进制颜色值（如#FF0000、#0000FF），font-size属性接受表示字体大小的数值（如12px、1.5em），background-image属性接受表示背景图片的URL值。

四、盒模型（Box Model）盒模型是CSS中用于布局的基本概念之一。

每个HTML元素都被看作是一个矩形的盒子，由内容区、内边距、边框和外边距组成。

内容区指的是元素的实际内容，内边距指的是内容区与边框之间的空间，边框指的是元素的边界，外边距指的是元素与其他元素之间的空间。

通过设置这些属性的值，可以控制元素的大小和间距。

CSS样式的常见应用技巧CSS（层叠样式表）在网页设计中起着重要的作用，它可以用来为网页添加各种各样的样式和效果。

在这篇文章中，我将分享一些CSS样式的常见应用技巧，帮助您提升网页设计的能力。

一、背景样式1. 渐变背景：使用CSS渐变属性可以为元素添加平滑的背景色过渡效果。

通过设置起始颜色和结束颜色，可以创建水平、竖直或对角线的渐变背景效果。

2. 背景图像：利用CSS的background-image属性，可以将图像作为元素的背景。

您可以使用不同的背景图像来增加网页的视觉吸引力。

3. 背景定位：使用background-position属性可以控制背景图片的位置。

通过调整水平和垂直位置，可以实现更精细的背景图像布局效果。

二、字体样式1. 字体选择：通过CSS的font-family属性，可以选择不同的字体样式来使文本更加有吸引力。

您可以在字体名称后跟上备用字体，以确保在某些情况下仍然保持一致的字体样式。

2. 字体大小和行高：利用font-size和line-height属性可以控制文本的大小和行高。

合适的字体大小和行高可以提高网页的读取和理解性。

3. 字体加粗和斜体：通过font-weight和font-style属性，可以使文本加粗或斜体显示。

这些样式可以用来强调重要的内容。

三、盒子样式1. 边框样式：使用border属性可以为元素添加边框效果。

您可以通过设置边框的颜色、宽度和样式来创建各种边框效果。

2. 盒子阴影：利用box-shadow属性可以为元素添加阴影效果。

通过调整阴影的颜色、模糊度和偏移值，可以创建出更加逼真的阴影效果。

3. 盒子圆角：使用border-radius属性可以为元素创建圆角效果。

通过调整圆角的半径值，可以实现不同尺寸和形状的圆角。

四、动画效果1. 过渡效果：利用CSS的transition属性，可以为元素添加平滑的过渡效果。

通过设置过渡的属性和时长，可以实现元素在状态变化时的渐变效果。

CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。

「资深前端工程师总结」前端面试知识点大全—CSS 篇1、css的display：none和visibility:hidden区别display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；visibility:hidden:视觉上的不可见，但是保留占据的空间，还具有宽度和高度；2、box-sizing ： content-box || border-box || inheritcontent-box：border和padding不计算入width之内;padding-box：padding计算入width内;border-box：border和padding计算入width之内，其实就是怪异模式了;当为border-box,则让元素维持在了IE传统模式下的怪异模式，即，设置的元素的width和height都是包括元素的宽度和padding和border。

可以运用到布局（因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了）和表单元素（表单中除了checkbox和radio外默认都是2px的border）上。

3、浏览器渲染DOM:浏览器将HTML解析成树形结构，即DOM。

CSSOM:将css解析成树形结构，即CSSOM。

Render Tree:DOM 和 CSSDOM合并后生成Render Tree。

Layout：计算Render Tree每个节点的具体位置。

Painting：将layout后的节点内容呈现在屏幕上；遇到外部的css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。

如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

Repaint——(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。

css点九写法
CSS点九写法是一种用于创建可缩放背景图像的技术，常用于移动端开发。

它的原理是将一个大的背景图像切割成多个小图像，然后在不同的屏幕尺寸下使用不同的图像来填充背景。

这样可以确保在不同尺寸的屏幕上都能够得到清晰的背景图像。

在CSS点九写法中，通常会使用两个关键的属性：
1. background-size：该属性用于指定背景图像的大小。

它通常设置为"cover"或"contain"，以确保背景图像能够完全覆盖整个元素。

2. background-image：该属性用于指定背景图像的路径。

通常会使用多个图像路径，以覆盖不同的屏幕尺寸。

下面是一个简单的CSS点九写法的示例：
```css
.container {
background-size: cover;
background-image: url(./src/assets/), url(./src/assets/qipao_);
}
```
在上面的示例中，我们使用了两个图像路径：一个是大的背景图像（），另一个是小一点的背景图像（qipao_）。

当屏幕尺寸较小时，小一点的图像会被用来填充背景；当屏幕尺寸较大时，大一点的图像会被用来填充背景。

这样可以确保在不同尺寸的屏幕上都能够得到清晰的背景图像。

css的练习题CSS（层叠样式表）是用于描述网页样式和布局的语言，通过CSS我们可以美化网页、改变元素的样式以及实现响应式布局等功能。

为了巩固和提高对CSS的理解和应用能力，以下是一些CSS练习题，希望能够帮助你进一步掌握CSS的技巧和知识。

练习题一：改变文本样式1. 创建一个HTML文件，并在里面添加一个段落元素。

2. 使用CSS将段落的字体颜色设置为红色。

3. 将段落的字体大小设置为18像素。

4. 将段落的文字设置为加粗。

5. 将段落的文字居中对齐。

练习题二：调整背景和边框样式1. 创建一个HTML文件，并在里面添加一个div元素。

2. 使用CSS将div的背景色设置为蓝色。

3. 将div的边框样式设置为实线，颜色为红色，边框宽度为2像素。

4. 将div的内边距设置为10像素。

5. 设置div的外边距为20像素。

练习题三：列表样式1. 创建一个HTML文件，并在里面添加一个无序列表。

2. 使用CSS将无序列表的项目符号改为实心圆。

3. 将无序列表的项目文本颜色设置为绿色。

4. 将无序列表的项目文本字体大小设置为14像素。

5. 将无序列表的项目文本添加下划线。

练习题四：盒模型调整1. 创建一个HTML文件，并在里面添加一个div元素。

2. 使用CSS将div的宽度设置为300像素，高度设置为150像素。

3. 将div的内边距设置为20像素。

4. 将div的边框样式设置为虚线，颜色为灰色，边框宽度为1像素。

5. 设置div的外边距为30像素。

练习题五：浮动与定位1. 创建一个HTML文件，并在里面添加两个div元素。

2. 使用CSS将第一个div的宽度设置为200像素，高度设置为200像素，并让其浮动到左侧。

3. 使用CSS将第二个div的宽度设置为400像素，高度设置为200像素。

4. 使用CSS将第二个div的定位方式设置为相对定位，并将其上移30像素、左移50像素。

5. 使用CSS将第二个div的背景色设置为黄色。

Css 知识点总结Css 知识点总结 (1)基本格式： (3)1、派生选择器 (3)2、id 选择器（选择器以"#" 来定义）： (3)如何插入样式表 (4)1、外部样式表 (4)2、内部样式表 (4)3、内联样式 (4)4、多重样式 (4)css背景 (5)1、背景色 (5)2、背景图像 (5)3、背景重复 (6)4、背景定位 (6)5、背景关联 (6)css文本 (7)1、文本颜色：text-indent 属性： (7)2、水平对齐：text-algin属性： (7)3、字间隔：word-spacing 属性 (8)5、字符转换text-transform 属性 (8)6、文本装饰 (8)7、direction 属性规定文本的方向/ 书写方向。

(8)CSS 字体 (9)1、font 属性 (9)2、font-family 属性 (9)3、font-style 属性 (10)4、font-variant 属性 (10)5、font-weight 属性 (10)6、font-size 属性 (11)7、line-height 属性 (11)CSS 列表 (12)1、设置所有的列表属性 (12)2、list-style-type 属性 (12)3、list-style-position 属性 (13)4、list-style-image 属性 (13)CSS 表格 (14)1、border-collapse 属性 (14)2、border-spacing 属性 (14)3、caption-side 属性 (15)4、empty-cells 属性 (15)5、table-layout 属性 (15)CSS 框模型概述 (16)CSS 内边距 (16)CSS 边框 (17)1、border 简写 (17)2、4个边框分别设置 (18)CSS 外边距 (18)1、margin 属性 (18)基本格式：三种格式：（CSS 语法由三部分构成：选择器、属性和值）例：body {color: blue}1、派生选择器例：Css部分：strong {color: red;}h2 {color: red;}h2 strong {color: blue;}Html文件部分:<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2> 2、id 选择器（选择器以"#" 来定义）：例：Css部分：#red {color:red;}#green {color:green;}Html 文本：<p id="red">这个段落是红色。

CSS知识点1、未知宽⾼的元素实现⽔平垂直居中⽅法⼀：flexbox布局优点：⽅便缺点：兼容性不好,IE⽀持很差<style>.parent4{display: flex;justify-content: center;align-items: center;width: 300px;height:300px;background: #FD0C70;}.parent4 .child{color:#fff;}</style><body><div class="parent4"><div class="child">hello world</div></div></body></html>⽅法⼆：使⽤CSS3的transform + 绝对定位优点：⽅便，⽀持webkit内核缺点：transform兼容性差，IE9以下不⽀持<style>.parent3{position: relative;height:300px;width: 300px;background: #FD0C70;}.parent3 .child{position: absolute;top: 50%;left: 50%;color: #fff;transform: translate(-50%, -50%);}</style><body><div class="parent3"><div class="child">hello world</div></div></body>⽅法三：使⽤display: table-cell优势：⽗元素可以动态改变⾼度。