前端css知识点总结

其他 2020-08-12 04:03:25 阅读次数: 0

前端css基础知识点总结

1.selector

7种选择器

1、通配符选择器 * 表示所有标签

* {
    background-color: blue;
}

2、标签选择器 标签名 一般对一类标签设置样式 采用

h1 {
    color: red;
}
a {
    text-decoration: none;
}

3、id选择器 #id 用的不多 一般用在独一无二的元素

#box2 {
    background-color: green;
}

4、类选择器 .class 用的最多

.f30 {
    font-size: 30px;
}

5、并集选择器(群组选择器) p div h2 字颜色为红色

p,
h2,
div {
    color: red;
}

6、交集选择器 li.f30 既是li又class是f30

li.f30 {
    text-decoration: underline;
}

7、后代选择器

div .f30 {
    font-weight: 700;
}

2.text&font

  • 设置文字颜色
color: red;
  • 字颜色方式
字颜色方式
颜色单词 red yellow blue …
rgb(0255,0255,0~255)
十六进制 #ff0000 #00ff00 #ffffff #000000 #f00 #0f0 #fff #000 #aa7712
  • 文字水平对齐方式
text-align:left或center或right
  • 文本的装饰效果
text-decoration:underline下划线 overline 上划线 line-through 中划线 none没有 默认值
  • 文本首行缩进
text-indent: 2em;
/*em是相对单位 相对于当前元素的font-size*/
  • 字号
font-size: 20px;
  • 文本粗细
font-weight: 400;
  • 字体样式
font-style: italic;
 /* normal 显示正常 italic文本显示斜体*/
font-family: "Microsoft YaHei", "宋体";
 /* 设置字体 假如字体名称含有空格 必须用引号印引起来*/
  • 行高
line-height: 20px;
  • font字体简写属性
font: italic 400 20px/20px "Microsoft YaHei", "宋体";
/*字号和字体同时具有 才可以简写*/

3.box-model

  • 盒子模型 width/height/padding/border/margin
属性 含义
width 宽度 指的是内容宽度 不是盒子真实宽
height 高度 指的是内容高度 不是盒子真实高
padding 内边距 指的是内容到边框的距离
border 边框
margin 元素与元素之间的间距
  • width，height
width: 200px;
height: 200px;
  • padding
/* 一个值 相当于四个方向是相同值*/
padding: 10px; 
/* 按照方向进行展开*/
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
/* 两个值 相当于上下10px 左右20px*/
padding: 10px 20px;
/* 上 10 右 20 下 30 左 20 没有就找对立面*/
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
  • border
边框三要素
border-width 边框宽度
border-style 边框样式 solid实线 dashed虚线
border-color 边框颜色 
/*四周*/
border: 10px solid blue;
/* 按照方向进行展开*/
border-bottom: 5px solid blue;
border-top: 5px solid blue;
border-right: 5px solid blue;
border-left: 5px solid blue;
  • margin
margin: 0 auto ;
/*auto 可以让有宽度的块级元素水平居中*/
margin-bottom:10px
margin-top:10px
margin-left:10px auto
margin-right:10px

4.margin

margin塌陷

  • 父子塌陷

当父亲没有设置padding、border、内容时，父子元素垂直方向的margin会重叠

以父子中较大的为准 而不是相加

解决办法

  1. 把儿子的margin转化为父亲的padding 注意盒子总高度变化
  2. 给父亲增加一个属性 overflow: hidden
  • 兄弟塌陷

垂直方向上相遇的margin会发生塌陷，以较大的值为准

只设置一个方向即可

5.background

  • 边界
border: 3px solid blue;
  • 背景图片
background-image: url(programer.jpeg);
/*默认会平铺*/
  • 背景重复
background-repeat: no-repeat或 repeat-x 或repeat-y;
  • 背景图定位
background-position: left top;
background-position: center center;
background-position: 50px 150px;
/* 50px 横坐标 150px纵坐标*/
background-attachment: fixed;
/*fixed固定的*/
  • background简写
background: red url(programer.jpeg) no-repeat 0 0 fixed;

6.element(block 、inline-block、 inline)

元素根据表现的特性分为块级元素、行内元素、行内块元素

元素类型 特点
块级元素 1 独占一行 2 设置宽高有效(padding、margin、line-height) 3 不设置宽度 默认是父亲的100%
行内元素 1 可以与其他行内元素并排 2 设置宽高无效（不支持垂直方向的margin和padding） 3 元素靠元素撑开
行内块元素 1 可以与其他行内元素或行内块元素并排 2 可以设置宽高

7.display

display 改变元素的显示模式

/*
display: block 转化为块级
display: inline 转为行内元素
display: inline-block 转为行内块元素
display: none 隐藏元素
*/

8.float

float和display不要写在同一个元素内

让两个有宽高的盒子平排 我们可以让这两个盒子转成行内块，但是盒子之间有空白

浮动的诞生就可以让元素平排 并且还可以设置宽高

浮动特点
1.相互贴靠(怎么贴靠)
2.浮动的元素可以设置宽高
3.脱离标准流(脱标)

9.clear float effect

清除浮动(带来的影响)方法
1.给浮动元素的父亲设置高度 ——有高度的盒子可以关闭浮动
2.clear:both 在父亲末尾增加一个元素 给这个元素设置属性clear:both
3.给浮动元素的父级 增加一个overflow:hidden
4.是第二种清除浮动的升级版 可以使用
5.最优方法 可以反复使用 
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="cleardiv"></div>
    </div>
    <div class="wrap2">

    </div>
</body>

/* 5 */
.cleardiv:after{
content:'';
display: block;
clear: both;
}

10.after,before

.box:before {
/* 
before: 在box内部的前面
after: 在box内部的最后
*/
content: '456';
display: block;
background-color: blue;
width: 60px;
height: 40px;
}

11.overflow

overflow: hidden;
/* 让溢出的内容隐藏*/
overflow: scroll;
/* 滚动 显示滚动条 内容溢出可以使用滚动条*/
overflow: auto;
/*内容溢出则显示滚动条 不溢出不显示滚动条*/

12.vertical-align

vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/*
文字与图片垂直方向的对齐方式
图片与图片垂直方向的对齐方式
*/

13.position

  • 相对位置
position: relative;
left:10px;
top:10px;
 /*相对于自己原来的位置*/
特性
1.不脱标
2.老家留坑 形影不离
3.可以提升层级
作用
1.相对自己进行位置微调
2.配合绝对定位使用
  • 绝对定位
position: absolute; 
left:10px;
top:10px;
参考点
1.假如该绝对定位元素没有定位(相对或者绝对或者固定)的祖先元素 则以body为参考点
2.假如有定位的祖先，则以最近的定位祖先元素为参考点
特性
1.脱标
2.假如不设置宽度 则由内容撑开
子绝父相
1.儿子采用绝对定位 父亲采用相对定位，此时儿子就可以在父亲范围内任意确定位置
  • 固定定位
position: fixed; 
left:10px或50%;
top:10px或50%;

参考点

始终以浏览器窗口左上角

14.z-index

position不是默认的static情况下使用

设置定位元素的层级
1.z-index属性 默认值是0
2.z-index属性值是整数，值越大越在上面 (从父现象)
3.z-index属性值相同的话 看结构，后面的会压住前面的

15.BFC

块格式化上下文（Block Formatting Context，BFC）

清除浮动前：

在这里插入图片描述

清除浮动后：

在这里插入图片描述

通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。

BFC特点
1.内部标签会在垂直方向一个接一个放置
2.垂直方向的距离由margin决定，属于同一个BFC的两个相邻标签会发生重叠
3.每个标签的左外边距与包含块的左边界相接触，从左到右,即便浮动也如此
4.BFC的高度，浮动的子元素参与计算
5.BFC是一个隔离的独立容器，容器里面的子元素不会影响外面标签
BFC作用
1.可以避免margin值叠加问题
2.清除浮动
3.避免文字环绕
4.实现两列、三列布局（后面讲）

16.problem

图片下方多出空白间隙

解决方案
1.对img设置display: block
2.设置vertical-align 取值top/middle/bottom
3.对图片的父级设置font-size:0;line-height:0
ie兼容问题 解决方案
1.ie中图片放在a中会显示边框 img {border: none;}
2.ie8以下浏览器背景复合属性写法问题 background: url(…)no-repeat center url和no-repeat之间没有空格 在ie8以下显示异常 正常以空格隔开
3.ie6和7兼容问题 (忽略)

17.hack

  • 条件hack

选择ie浏览器以及不同版本

是ie特有功能，ie10开始标准模式下 不再支持条件注释

<!--[if IE]>
    <p style="backgroud: red;">
         只能被ie识别
    </p>
<![endif]-->

<!--[if IE 6]>
    <p style="backgroud: red;">
        只能被ie6识别
    </p>
<![endif]-->

<!--[if gt IE 7]>
    <p style="backgroud: red;">
        能被ie7以上版本识别
    </p>
<![endif]-->
符号 含义
gt 大于
lt 小于
gte 大于等于
lte 小于等于
! 非
  • 属性级Hack

我们可能会在样式属性名前面或值的后面加上一些只有特定

浏览器能识别的hack前缀或后缀

_ 下划线 选择ie6或以下 如 _color: red; color: green

* ie6，7识别

\0 ie8以上

18.opacity

  • opacity
opacity:num  /*num 0到1*/

兼容性 ie9及以上和标准浏览器都支持

特点 设置opacity的元素的所有后代会一起具有透明性

用法 调整图片或模块整体不透明度

  • rgba

兼容性 ie9及以上和标准浏览器都支持

使用 设置颜色的不透明度，用于调整color，background-color等

ie专属滤镜 filter:Alpha(opacity=x)

兼容性 ie6-9 ie10开始废除

19.sprite

css sprite css精灵或css雪碧

把网页中一些背景图片整合到一个大文件中，然后利用

background-image、background-repeat、background-position

组合进行背景定位，适用于小图标

  • 优点

减少网页的http请求,从而提高页面的性能

图片命名更容易

更换风格方便

  • 缺点

必须限定容器大小符合背景图元素位置

/*代码写法*/
.box {
    width: 48px;
    height: 48px;
    background: url(tb.png) no-repeat 0 -120px;
}

20.others

border-spacing，border-collapse

table,
tr,
td {
    border: 1px solid #ccc;
    /* 边框与边框的间距*/
    border-spacing: 0;
    /*制作细线表格 */
    border-collapse: collapse;
}

cursor,word-spacing,letter-spacing

div {
    /* 一个箭头*/
    cursor: default;
    /*小手指*/
    cursor: pointer;
    /* 浏览器默认设置的光标 */
    cursor: auto;
    /*十字叉*/
    cursor: crosshair;
    /*移动十字箭头*/
    cursor: move;
    /* 字间距 */
    letter-spacing: 10px; 
    /* 词间距 以空格解析为依据 */
    word-spacing: 20px;
    
    
}

display，visibility

display: none; 
visibility: visible;

outline

input {
     /* outline轮廓 一般用法同border 设置值为none去掉轮廓线*/
     outline: none;
}

PC端项目-规范

1 文件管理

  • 文件名用英文命名
  • css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式、比如页面的头部尾部、重复使用字体、字号等)
    index.css
  • 图片名称
    图片命名尽量与其模块样式名称保持一致，尽量用小写
    如 login_bg.jpg login_user_ico.gif

2 html书写规范

  • h5模版
  • 书写规范 （缩进、属性值必须用双引号、标签要闭合、属性标签等名字由数字下划线或小写字母组成）
  • 语义化
    比如 图片添加alt
  • 合理嵌套html标签
    ul>li
    dl>dt+dd
    p不能套p a不能套a a不能套交互元素
  • 保证结构和表现相分离

3 css书写规范

  • 编码 utf-8

  • 规划重置样式表

  • 版心-页面有效区域 1000px 1200px

  • 书写代码时候
    添加注释
    class/id
    jd_top jdTop
    缩进
    布局定位属性->自身属性->文本属性->其他属性

  • 兼容
    border-radius

    ie10,ie9支持border-radius属性

4 注意事项

PC 一般兼容到ie8以及以上

猜你喜欢

转载自blog.csdn.net/Sun_Raiser/article/details/107646158
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022