CSS粗略小总结

最新推荐文章于 2024-07-25 10:45:42 发布

DY木子羊

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量87

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qianxunand/article/details/108457867

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主流浏览器及内核

ie(trident)
firefox(gecko)
google chrome(webkit/blink)
safari(webkit)
opera(presto)

CSS(cscading style sheet) 层叠样式表

引入css

1. 行间样式 <div style=""></div>
2，页面级css ，写在<head>标签中的<style type = "text/css">
3. 外部的css文件,<link rel="stylesheet" type="text/css" href=""> ,异步加载
    异步的：两件事情同时做
    同步的：两件事情不同时，一个做完做另一个

选择器

id选择器
一个元素只能有一个id值 #
class选择器
多对多的关系 .
标签选择器
标签名{ xxx }
通配符选择器
任意的，全部的 *{xxx}
派生选择器（父子选择器）
父子|孙{xxx}
直接子元素选择器
父元素>子元素{xxx}
并列选择器（一个条件不能定位到要找的元素）
分组选择器
em,
strong,
span{xxx}

css权重（256进制）

只要写下同一行的选择器把他们的权重相加，权重大的起作用，权重相同后面覆盖前面
    ！important （infinity）
    行间样式 （1000）
    id （100）
    class|属性|伪类 （10）
    标签选择器|伪元素 （1）
    通配符 （0）

常用属性

font-size 设置字体的大小，是字体的高
font-weight 设置字体的粗细
值：lighter|normal|bold|bolder|100~900
font-style: 设置字体的样式 italic
font-family: 设置字体
color: 设置颜色
1. 纯英文
2. 颜色代码
3. 颜色函数rgb
border：设置外边框（三角形可以用border来画）
1. border-width 边框宽度
2. border-style 边框样式
  solid 实线
  dotted 点虚线
  dashed 条虚线
3. border-color 边框颜色
  transparent 透明色
text-align:设置对其方法
left|center|riht
line-height:设置单行行高
水平垂直居中可以用line-height来实现（line-height:height;）
text-indent: 设置文本缩进
text-decoration:设置文本样式，上划线，下划线，删除线
none|underline|overline|linethrough
cursor: 设置光标样式
pointer|move|help
opacity: 0~1 设置透明度
display:
1. inline 内联元素
  内容决定元素所占的位置，不可以通过css来改变宽高
  行级元素：span strong em a del
2. block 块级元素
  独占一行，可以通过css改变宽高
  块级元素：div p ul ol form address
3. inline-block 行级块元素
  内容决定大小，可以改变宽高
  行级块元素： img
  凡是带有inline的元素，都有文字特性

定位技术

position

absolute 脱离原来位置进行定位，相对于有最近有定位的父级进行定位，如果没有则相对于文档定位
relative 保留原来位置进行定位
一般我们用relative做参照物，用absolute进行定位
fixed 绝对定位
stikey 粘性定位

z-index 层定位

边距

padding:内边距
margin：外边距
- margin塌陷
  垂直方向的margin会粘合在一起取最大值
  解决margin塌陷
  bfc（block format context）块级格式化上下文
  触发bfc
  position：absolute
  display:inline-block
  float:left/right
  overflow:hidden
- margin合并
  领土共用上面的margin-bottom和下面的margin-top领土公用
  一般通过计算来解决

浮动float

float:left 左浮动
float:right 右浮动

 浮动元素产生了流，所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和所有文本类的元素以及文本都能看到浮动元素*
    清除浮动流 clear必须用在块级元素上
        使用伪元素
       ::after{
            content:"";
            display:block;
            clear:both;
        }

凡是设置了position:absolute,float:left/right，系统会打内部转换成Inline-block

单行文本溢出打点

打点三件套

white-space:nowrap; 让文本失去换行功能
overflow:hidden; 溢出隐藏
text-overflow:ellipsis; 溢出部分显示点

多行文本一般不做打点做截断

height= line-height*行数

背景

background-image：url（）；背景图片
background-size：weight height；设置背景图片的大小
background-repeat：repeat|no-repeat 背景图片重复
background-position：x,y；背景图片位置

DY木子羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS粗略小总结

主流浏览器及内核ie(trident)firefox(gecko)google chrome(webkit/blink)safari(webkit)opera(presto)CSS(cscading style sheet) 层叠样式表引入css1. 行间样式 <div style=""></div>2，页面级css ，写在<head>标签中的<style type = "text/css">3. 外部的css文件,<link re
复制链接

扫一扫

专栏目录