CSS总结

最新推荐文章于 2024-08-21 22:53:13 发布
最新推荐文章于 2024-08-21 22:53:13 发布
阅读量346 收藏
点赞数 1
分类专栏： css 新特性 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/84452135
版权

目录

一、元素布局

http://www.w3school.com.cn/css/css_positioning.asp
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
文档流：是指文档中所有可见元素在文档中的排列顺序。

1、浮动特点

http://www.w3school.com.cn/css/css_positioning_floating.asp
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动元素

1.1、排列方向改变

浮动可以使元素按照指定方向排列，直到遇到父元素的边界或者另一个浮动元素为止。

float:
1. none 不浮动（默认值）
2. left 左浮动 （从左向右排列）
3. right 右浮动（从右向左排列）

1.2、脱离文档流

  1. 浮动会使元素脱离文档流（元素不占位，无法撑开父元素，影响后续布局）
.wrap{border:5px solid red;}
.box1{float:left;background:green;width:200px;height:200px;}
.box2{float:left;background:blue;width:200px;height:200px;}

<div class="bg box"></div>
<div class="bg2 box"></div>
<div class="bg3 box"></div>

浮动造成的问题

解决方案1：

给浮动元素的【父元素】固定高度。缺点：不够灵活

.wrap{height:200px;border:5px solid red;}//上图右侧
解决方案2：

1.在浮动元素的最后，加一个空的块元素（div）
2.该元素不浮动。
3.cleardiv{clear:both;}
缺点：代码冗余。

<div class="wrap">
     <div class="box1"></div>
     <div class="box2"></div>
</div>
//加空快
<div style="height:100px;background:yellow;"></div>
解决方案3

上个方案的优化，浮动父元素之后使用伪元素。推荐方法：floatParents:after{content:"";display:block;clear:both;}

.wrap:after{
content:"";
display:block;
clear:both;//clear 属性规定元素的哪一侧都不允许其他浮动元素
}
解决方案4

上面方法的兼容处理

 .clearfix{*zoom:1;}/*ie7及以下兼容*/
 .clearfix:after{content:"";display:block;clear:both;}

1.3、层级提升，覆盖后面正常元素

  1. 会提升元素层级
    下面.bg2的div层级提升导致.bg3的div被遮盖
.bg{background:red;}
.bg2{float:left;background:green;}
.bg3{background:blue;}
.box{width:100px;height:100px;}

<div class="bg box"></div>
<div class="bg2 box"></div>
<div class="bg3 box"></div>

提升层级

1.5、可以使内联元素支持宽高

浮动可以让内联元素支持宽高，块元素没有宽度时，宽度由内容撑开（类似内联框）。

span{float:left;background:red;width:100px;height:100px;}
<span>span</span>

浮动行元素支持宽高

1.6、使块元素一行排列

浮动可以使块元素在一行排列

div{float:left;background:red;}
<div>divdivdiv</div>
<span>span</span>

块元素一行排列

1.7、浮动元素无margin叠加

div{
float: right;
width: 100px;
height: 100px;
background-color: #00F7DE;
margin: 50px
}
<div>box1</div>
<div>box2</div>

浮动元素无margin叠加

2、定位

适用定位的情况：当需要有元素覆盖的时候。

  1. position：static （默认值）| relative（相对定位）|absolute （绝对定位）|fixed （固定定位）
  2. 偏移量：left:距左 | right:距右 | top:距上 | bottom:距下

2.1、相对定位特点

1、相对于元素原来位置进行定位
2、不脱离文档流（原来位置仍然占位）
3、不定义偏移量时，对元素本身基本没有影响
4、提升元素层级
5、通常是配合绝对定位使用
.box2{
 background: green; 
 position:relative;
}

2.2、绝对定位

特点：

1、有定位父级时

相对于【最近】的已定位父级进行定位

2、没有定位父级

相对于根元素html进行定位。

3、通常配合相对定位使用
4、脱离文档流（原来位置不在占位）
5、提升层级
6、使块元素由内容撑开（适应内容-生成内联框）
7、使内联元素支持宽高
span{
background:blue;
width:100px;
height:100px;
position:absolute;
right:0;
bottom:0;
}

2.3、固定定位

1、始终相对于窗口进行定位。
2、脱离文档流（原来位置不在占位）
3、提升层级
4、使块元素由内容撑开（适应内容-生成内联框）
5、使内联元素支持宽高
 .inner{
    width: 100px;
    height: 100px;
    background: red;
    position:fixed;
    right:0;
    bottom:0;
}

2.4、定位元素的层级：

定位元素层级 高于 普通文档流内容元素的层级。

  1. 定位元素之间的层级 z-index:z轴顺序 堆叠顺序 层叠顺序
  2. 只对定位元素有效。
  3. 值越大，显示越靠前
  4. 值相同，由结构先后顺序决定（后写的覆盖前写的）
.box{position:fixed;z-index:1000px}

实现弹出框效果：

<style>
  body{margin:0;}
  .page{
      height:3000px;
      background:url("yk.png")
      repeat-y center top;
  }
  .mask{ position: fixed;
      left:0;top:0;width:100%;height:100%;
      background:#000;
      opacity: 0.3;
      filter:alpha(opacity=30);
  }
  .loginbox{
      width:760px;height:350px;
      background:yellowgreen;
      position:fixed;left:50%;top:50%;
      margin-top:-175px;margin-left:-380px;
  }
</style>
<!--
 不透明： opacity:0-1；0全透明；1全不透明
 IE:
    filter:alpha(opacity=50)  取值：0-100
-->
<div class="loginbox"></div>
<div class="mask"></div>
<div class="page"></div>

弹出框效果

2.5、元素定位居中：

定位元素水平垂直居中的实现方法：left:50%;top:50%;margin-left:- 盒子宽度的一半;margin-top:- 盒子高度的一半;
详情请点击跳转：绝对居中
https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/84992614

3、弹性布局

弹性布局：https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/82990404

二、样式

引入样式的几种方式，行间样式，内部样式，外部样式。

1、行间样式

开始标签的内部：style=""

<div style="width:100px;height:100px;background:red;"></div>

2、内部样式

位置：head标签内部。格式：<style></style>

<head>
<style type="text/css">
  .box{width:100px;height:100px;background:red;}
</style>
</head>

3、外部样式

三、常用字体样式

http://www.w3school.com.cn/css/css_font.asp

font-family: 字体 字体系列
font-size: 字号
font-weight: 字体是否加粗
             bold加粗
             normal 正常
font-style:  字体风格(字体是否以斜体显示)
            italic 倾斜
            normal 正常
 line-height: 行高
              测量：行高->  文字高度+行间距
              特点：
                    单行文本垂直居中

缩写顺序：font: 字体风格 字体加粗 字号/行高 字体; [空格隔开]

font:italic bold 30px/40px "宋体";

四、常用文本样式

http://www.w3school.com.cn/css/css_text.asp

text-align: 文本水平对齐方式。left|right|center|justify（两端对齐）
text-indent: 首行缩进。em相对单位|相对于当前元素的font-size值
text-decoration: 文本装饰。none 无|underline 下划线|line-through 中划线
|overline上划线
color:文本颜色。（十六进制：）#ff6600|RGB(r红：00-ff g黄 b青)
               #000000黑色
               #fffff 白色
               #ff0000 红色
|颜色名称：（red blue yellow ...）|rgb颜色模式：rgb(r,g,b)0-255

五、背景

http://www.w3school.com.cn/css/css_background.asp
给元素设置背景，background属性

background-color:背景颜色
background-image:背景图片
background-repeat:背景重复
                  repeat(x,y重复)
                  no-repeat  不重复
                  repeat-x   沿x轴平铺
                  repeat-y   沿y轴平铺
background-position:背景定位
                    x    y
                    关键字：
                           水平 left center right
                           垂直： top center bottom
                     px
简写：background：(空隔隔开)[背景色  背景图片 背景平铺  背景定位]；

例如：

//全写
.box{
   background-color:#000;
   background-image: url(1.jpg);
   background-repeat:no-repeat;
   background-position:20px 20px;}
//简写
.box2{background:#000 url(1.jpg) no-repeat 20px 20px}

六、css选择器

选择器{ 属性名称:属性值; 属性名称2:属性值;}

6.1、选择器的优先级

!important>行间样式优先级 > >id选择器 > 类选择器 > 元素选择器 > 通配符
原则：范围越精确，优先级越高。

6.2、*通配符选择器

*{ margin:0; padding:0;}

6.3、 id选择器

#box{margin:0; padding:0;}

6.4、class选择器（类选择器）

class名称要求：不能使用中文、不能用纯数字、不能以数字开头、不能使用特殊符号（-、_除外）

.box{margin:0; padding:0;}

6.5、分组选择器（群组选择器）

将选择器与选择器之间用逗号隔开，用逗号隔开的各组选择器都具有相同的样式。

.left,.right{
	float:left;
	width: 150px;
	height: 300px;
}

6.6、派生选择器

也叫后代选择器，包含选择器。
http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp

.bottom .small{
	background-color: #000;	
}
.box span{background:green;}
//只有.box下的span背景颜色为绿

6.7、子元素选择器

http://www.w3school.com.cn/css/css_selector_child.asp

div>p{background:red;}

6.8 、相邻兄弟选择器

http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

div+p{background:red;}

七、CSS3介绍

CSS3 是最新的 CSS 标准。为了提高开发速度，也为了方便各主流浏览器根据需要渐进式支持，css3按模块化进行了全新设计，这些模块可以独立发布和这实现，也为日后css的扩展奠定了基础。
其中最重要的 CSS3 模块包括：

7.1、属性选择器

7.1.1、旧的属性选择器：

  1. E[attr]
  2. E[attr=“val”]

7.1.2、新增的属性选择器

  1. E[attr^=“val”] 选择拥有attr属性且属性值【等于】val的E元素
  2. E[attr$=“val”] 选择拥有attr属性且属性值以val【结束】的E元素
  3. E[attr*=“val”] 选择拥有attr属性且属性值【包含】val的E元素

特例：

  1. E[attr=“val”]

7.2、伪类选择器

ie8及以下不支持

E:first-child{}  选择属于父元素【第一个】子元素E
E:last-child{}  选择属于父元素【最后一个】子元素E
E:nth-child(n){} 选择属于父元素【第n个】子元素E
  n：数字，表达式  2n  2n+1  3n，关键词　even（偶数）  odd(奇数)
E:nth-last-child(n){} 选择属于父元素的【倒数第n个】子元素E
E:enabled{}   处于可用状态的元素
E:disabled{}  处于禁用状态的元素
E:checked{}   处于选中状态的元素

7.3、伪元素选择器

单冒号(伪元素选择器)可以兼容至ie8

1. E:after{} ：在元素内部最后生成内容
2. E:before{}： 在元素内部最开始位置生成内容
3. E::first-line{}  选择元素第一行内容（==适用于块元素==）
4. E::first-letter{} 选择元素第一个字符 （==适用于块元素==）
5. E::placeholder{} 设置输入提示占位符样式

7.3.1、css3:区分伪类和伪元素

伪类：单冒号
伪元素：双冒号。例如：E::after{} E::before{}

八、框模型（Box Model）

http://www.w3school.com.cn/css/css_boxmodel.asp

九、背景和边框

十、文本效果

十一、2D/3D 转换

十二、动画

十三、多栏布局

  1. column-count：栏目的数量(3 / auto)
  2. column-width：栏目的宽度（px / auto）
  3. column-gap：栏目间距
  4. column-rule：栏目的边框
    1. column-rule-width:
    2. column-rule-style:
    3. column-rule-color:
.box{
column-width:200px;
column-gap: 30px;
column-rule:1px dashed red;
}
<div class="box">(中间大量文字省略)</div>

效果如下：
多栏布局

十四、用户界面

http://www.w3school.com.cn/css3/css3_user_interface.asp

  1. resize
  2. box-sizing
  3. outline-offset

十五、浏览器私有前缀

浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持；
加前缀是兼容老版本的写法，比较新版本的浏览器都支持直接写。

内核私有前缀浏览器
Gecko内核css前缀为"-moz-"火狐浏览器
WebKit内核css前缀为"-webkit-"chrome、safari
28+ Blink内核
Presto内核css前缀为"-o-"Opera(欧朋)
现已改用Google Chrome的Blink内核
Trident内核css前缀为"-ms-"IE

十六、新增颜色模式

CSS的颜色：http://www.w3school.com.cn/cssref/css_colors_legal.asp

  1. rgba(r,g,b,a);兼容性：ie8及以下不支持。a：alpha透明度。
  2. hsl(h,s,l);h ：色调 hue；s ：饱和度 saturation ；l： 亮度 lightness；兼容性：ie8及以下不支持。
.box{
    width: 200px;
    height: 200px;
    background: hsl(0,100%,50%);//红色
}
<p class="box"></p>
  1. hsla(r,g,b,a) ； a ：alpha透明度，取值：0-1。0：全透明；1：全不透明； 0-1半透明。兼容性：ie8及以下不支持。
.box{
    width: 200px;
    height: 200px;
    background: hsla(0,100%,50%,0.5);//办透明红色
}
<p class="box"></p>

这边有一个颜色转换工具，可以转换颜色。

十七、媒体查询

1样式表内

@media screen and (min-width:601px) and (max-width:1000px){
  /* 600-1000*/
  body{background:green;}
 .box{column-count:3;}
}
@media screen and (max-width:600px){
   /*小于等于600*/
   body{background:red;}
   .box{column-count:1;}
}
<div class="box">（文字内容省略）</box>

2 link标签

<link rel="stylesheet" href="gt1000.css" 
media="screen and (min-width:1000px)">

<link rel="stylesheet" href="w600-1000.css"  
media="screen and (min-width:601px) and (max-width:1000px)">

<link rel="stylesheet" href="lt600.css" 
media="screen and (max-width:600px)">

3 横竖屏

布局和样式

<!--横屏-->
<link rel="stylesheet" href="gt1000.css" media="screen and (orientation:landscape)">
<!--竖屏-->
<link rel="stylesheet" href="lt600.css" media="screen and (orientation:portrait)">

 <div class="box">（大量文字省略）</box>

gt1000.css文件

body{background:pink;}
.box{column-count:4;column-gap:20px;}

lt600.css

body{background:red;}
.box{column-count:1;}

效果：
媒体查询横竖屏显示

十七.CSS命名规则

主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。

参考文章：

小哥家的小费
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS面试总结
yy_huang的博客
03-01 192
1、CSS选择器优先级是怎样的？ css选择器优先级是：内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面，优先级是由A、B、C、D的值来决定，其中他们的值计算规则如下： A的值等于1的前提下是存在内联样式，否则A = 0； B的值等于 ID选择器 出现的次数 C的值等于 类选择器 和 属性选择器 和 伪类出现的总数； D的值等于 标签选择器 和 为伪元素 出现的总次数。 就比如下面的选择器，它不存在内联样式，所以A=0，不存在id选择器B=0，存在一个类选择器C=1
CSS 一些特别的属性
爱人BT的博客
10-31 771
一、关于 CSS 的重置问题 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b,...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题
newBunny的博客
04-20 1424
https://www.jianshu.com/p/1f4693d0ad2d
CSS自定义滚动条样式
weixin_30430169的博客
03-18 68
(基于webkit内核的浏览器)分析 滚动条组成： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-butt...
css实现滑动操作
Jensen1985的博客
05-04 474
CSS 滑动操作的原理与轮播图原理类似： 子盒子宽度或者高度超出父盒子宽度或者高度，隐藏滚动条，就可以实现滑动操作： html 结构如下： <div class="box"> <ul> <li></li> <li></li> ...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css总结
08-02
【CSS总结】 CSS，全称Cascading Style Sheets（层叠样式表），是网页设计中的核心技术之一，用于控制网页元素的样式、布局和呈现。它与HTML或XML等标记语言结合使用，为网页添加视觉效果和结构化表现。在本篇内容...
前端css总结
03-23
css总结很全，前端小白学习必备。后期还会发JS的。赚点积分
CSS总结.xmind
02-24
CSS总结.xmind
页面不能滑动css,css:touch-action致使安卓没法滚动页面
weixin_29050829的博客
08-04 1926
前言相信你们搜css touch-action很容易搜到一批文章，但感受本身仍是须要写下本身这这个过程当中的一些探索经历。css之因此写，是由于单独去学知识点或者单独看一篇文章其实很简单的，难的是在本身实践中，由于一个问题找一个方案，而后又引发另一个问题，而这个不断发现问题的过程很是低效，须要各类尝试和理解。html使用css touch-action的缘由在其官方的说明中：是否，以及以何种方式，...
CSS常见技巧
weixin_38884718的博客
05-31 196
CSS常见技巧 单行或多行文本超出显示省略号 // 单行文本出现省略号 width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; // 多行文本出现省略号 display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设
页面无法滑动-CSS: touch-action属性
随便写写
12-13 1982
问题 手机调试时 , 发现无法上下滑动 , 以致于下面内容无法显示的问题 . touch-action:none ; 属性导致, 去掉就好了. CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。 只是禁止了触摸事件 , 实际如果有鼠标的话 , 利用鼠标滑轮 , 还是可以上下滑动 , 但是并不可以触摸上下滑动 . 动画演示: 参考文档 深入理解 CSS 属性：touch-action touch-action - CSS（层叠样式表） | MDN
css省略号，css书写顺序，实现滑动，设置滚动条的样式，设置文字的渐变色
丁贵龙学习技术的博客
08-30 593
css笔记记录！！！ 1.oninput事件 // 当用户向 <input> 中尝试输入时执行 JavaScript： // 是输入框仅限于汉字输入(无延迟) 例如:oninput="value=value.replace(/[^\u4E00-\u9FA5]/g,' ')" 2.单行出现省略号 // 复制 替换element框架，的图标的背景图标 // 多行本本省略号. .........
简单粗暴方式解决H5移动端页面滚动的时候触发touchend事件
xiaoqiangbigbrother的博客
07-23 8577
H5移动端的页面在安卓和IOS微信内置浏览器中呈现的形式不一样,所以我统一采用touch事件代替click事件 1，touchstart事件触发的时候设置全局变量（名字随便取）flag = 1； 2，touchmove事件触发的时候设置 flag = 0； 3，touchend事件触发的时候判断flag值 当flag = 1 的时候触发touchend事件里面的函数，触发完以后在末尾再设置f...
css滚轮_如何创建CSS3滚轮菜单
Web design 教程小屋
07-08 1833
学习CSS3没有比让您真正从事实际项目更好的方法了，这正是我们要做的。 我将教你如何使用一些初学者到高级CSS技术来创建一个很棒的，分层CSS3轮菜单。 因此，断开您喜欢的文本编辑器或IDE，让我们开始使用CSS3魔术吧！ 今天，您将学习如何从可用的多种不同样式和颜色中创建出甘蔗泪滴。 您将在源文件中收到所有变体。 另外，作为一个额外的奖励，我添加了一些可选的Javascript，以便您...
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 129
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 202
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
小兔鲜首页制作css
最新发布
qq_65046523的博客
08-21 143
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值