Web前端基础(3)CSS基础知识

浏览器兼容问题

第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大

解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px。

1
2
_height: 4px;
_font-size: 0px

IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性。

第二,IE6不支持用overflow:hidden;来清除浮动的

解决办法,以毒攻毒。追加一条 zoom:1;

1
2
overflow: hidden;
_zoom:1;

margin相关问题

margin塌陷现象

标准文档流中,竖直方向的margin不叠加,以较大的为准。

如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的。

盒子居中

margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子左右居中。

1
2
margin-left: auto;
margin-right: auto;

简写为

1
margin:0 auto;

  1. 使用margin:0 auto; 的盒子,必须有width,有明确的width
  2. 只有标准流的盒子,才能使用margin:0 auto; 居中。
    也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
  3. margin:0 auto;是在居中盒子,不是居中文本。
    文本的居中,要使用text-align:center;

善于使用父亲的padding,而不是儿子的margin

如果父亲没有border,那么儿子的margin实际上踹的是“流”,踹的是这“行”。所以,父亲整体也掉下来了。

margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。

margin的IE6兼容问题

IE6双倍margin bug

当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。

解决方法:使浮动的方向和margin的方向,相反。

E6的3px bug

不要使用margin使用div的padding

行高和字号

文字,是在自己的行里面居中的。比如,现在文字字号14px,行高是24px。那么:

为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。

单行文本垂直居中

1
2
3
4
5
6
7
8
9
10
<style text="text/css">
p{
height:60px;
line-height:60px;
background-color:#FF923D;
color:white;
}
</style>

<p>单行文本垂直居中测试文本</p>

单行文本垂直居中测试文本

只适用于单行文本垂直居中!!不适用于多行。如果想让多行文本垂直居中,需要设置盒子的padding:

font属性

使用font属性,能够将字号、行高、字体,能够一起设置。

1
font: 14px/24px “宋体”;

为了防止用户电脑里面,没有微软雅黑这个字体。就要用英语的逗号,隔开备选字体
我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体

1
font-family: "Times New Roman","微软雅黑","宋体";

行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。

1
font:12px/200% “宋体”

超链接的美化

伪类:同一个标签,根据用户的某种状态不同,有不同的样式。这就叫做“伪类”。

a标签有4种伪类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link{ 		/*没有点击过*/
color:red;
}

a:visited{ /*曾经点击过*/
color:orange;
}

a:hover{ /*鼠标悬停*/
color:green;
}

a:active{ /*鼠标按下未松开*/
color:black;
}

background系列属性

background-color

1
2
background-color: rgb(0,255,0);
background-color: #ff0000;

background-image

1
background-image:url(images/wuyifan.jpg);

background-repeat属性

1
2
3
4
background-repeat:repeat;    /*全部平铺*/
background-repeat:no-repeat; /*显示一张图片,不平铺*/
background-repeat:repeat-x; /*水平平铺*/
background-repeat:repeat-y; /*竖直平铺*/

background-position属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style text="text/css">
.testdivp{
width:200px;
height:200px;
border:1px solid red;
}
div #testdiv1{
background-image:url(image7.png);
background-repeat:no-repeat;
background-position:50px 80px;
}

div #testdiv2{
background-image:url(image7.png);
background-repeat:no-repeat;
background-position:-50px -80px;
}
</style>

<div class="testdivp" id="testdiv1"></div>
<div class="testdivp" id="testdiv2"></div>

css精灵

“css精灵”,英语css sprite,所以也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

用单词也可以描述

1
2
3
background-position: 描述左右的词儿  描述上下的词儿;
描述左右的词儿: left、 center、right
描述上下的词儿: top 、center、bottom

background-attachment属性

1
background-attachment:fixed;

背景就会被固定住,不会被滚动条滚走。

background综合属性

1
background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于

1
2
3
4
5
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

相对定位

相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。

绝对定位

绝对定位比相对定位更灵活。

1. 绝对定位脱离标准流

绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了。

2. 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角

3. 绝对定位以盒子为参考点

一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。

最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷.

1
2
3
4
5
<div class="box1">   →  相对定位
<div class="box2"> → 没有定位
<p></p> → 绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
</div>
</div>

不一定是相对定位,任何定位,都可以作为参考点

1
2
3
<div>  → 绝对定位
<p></p> → 绝对定位,将以div作为参考点。因为父亲定位了。
</div>

绝对定位的儿子,无视参考的那个盒子的padding。

4. 绝对定位的盒子居中

绝对定位之后,所有标准流的规则,都不适用了。所以m a r g i n:0 auto;失效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style text="text/css">
div #testdw1{
position:relative;
width:100%;
height:80px;
background-color:#FFCF00;
}

div #testdw2{
background-color:#31B431;
width: 200px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -20px;
}
</style>

<div id="testdw1">
<div id="testdw2"></div>
</div>

固定定位

1
position:fixed;

固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
固定定位脱标!
IE6不兼容。

z-index

只有定位的盒子里面才有z-index

  • z-index值表示谁压着谁。数值大的压盖住数值小的。
  • 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
  • z-index值没有单位,就是一个正整数。默认的z-index值是0。
  • 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style text="text/css">
div #testdw3{
position:relative;
width:100%;
height:200px;
background-color:#FFCF00;
}

div #testdw4{
background-color:#31B431;
width: 100px;
height: 100px;
position: absolute;
z-index:99;
left: 400px;
top: 50px;
}

div #testdw5{
background-color:#F34836;
width: 100px;
height: 100px;
position: absolute;
left: 450px;
top: 70px;
}
</style>

<div id="testdw3">
<div id="testdw4"></div>
<div id="testdw5"></div>
</div>

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×