CSS基础知识

最新推荐文章于 2024-04-02 14:24:22 发布

漏气的可乐

最新推荐文章于 2024-04-02 14:24:22 发布

阅读量169

点赞数

分类专栏： css 文章标签： CSS css基础知识

本文链接：https://blog.youkuaiyun.com/weixin_43841301/article/details/101030116

版权

css 专栏收录该内容

4 篇文章

订阅专栏

一、css布局方式：

1.默认文档html结构顺序
2.浮动布局float；
3.定位布局position: 绝对、相对、窗口而定、无定位
定位布局：position
绝对定位：position：absolute
以父基点，进行定位，但还占原来的空间
注意事项：使用绝对定位是，必须有俩个条件：
a、必须给父元素加定位元素，一般使用绝对定位
b、给子元素加绝对定位的同时要加方向属性。
相对定位：position：relative
以自身为基点，进行定位，但还占原来空间
注意事项：虽然相对定位也是脱离文档流。但是不能用清除浮动的方法解决问题
固定定位：fixed
元素框的表现类似与将position设置为absolute，不过基点是视窗本身
无定位：static
浮动布局 float：
1.float取值：right left clear(可以让段落移动到div下面) none （默认）。float不具有继承性
2.具体描述：对块元素设置浮动属性后，它就脱离了当前的文档流布局的方式，漂浮到他的父级元素的左边或者右边，如果想让多个块显示在同一行中，可以讲这些都设置成浮动，并且浮动方向相同。
3.浮动的缺点：元素有默认属性，每个浏览器的默认属性不同，会对父元素和后面的元素产生影响，造成布局错乱。
解决方法：使用Clear属性：取值（left,right,both,none）通常使用both
4.清除浮动的方法 a、给父元素添加 overflow:auto;zoom:1;
b、添加一个附加层，必须设置高度，否则无效。#haa{clear:both;height:20px;}
c、利用伪类：.cf：after{clear:both;content:’.’;display:block;height:0;width:0;visibility:hidden;}
5.IE6中的bug：双倍边距，可以采用给元素添加display：inline 属性解决。

二、CSS元素的分类

块状元素、内联元素
1、块状元素：水平拉伸垂直包裹，可以设置高度和宽度、不能与其他元素同行。
<div> <table> <h1>-<h6> <ul> <ol> <dl>
2、内联元素：只能容纳文本和内联元素，容许其他内联元素与其同行，宽度不起作用。
<a> <span> <img> <input> <label> <select>

三、CSS应用网页的四种方式:

行内样式（内联）、内嵌样式、外部链接样式、导入方式

四、CSS选择器

基本选择器：标签选择器、ID选择器、类选择器、通用选择器（通配符）
高级选择器：后代选择器、交集选择器、并集选择器、伪类选择器
1、标签选择器：针对一类标签（选择所有同类标签，而并非一个）；
2、ID选择器：（#表示）同一个html页面，不能出现同样的id，严格区分大小写；
3、类选择器：（.表示）类选择器可以被多种标签使用，同一个标签可以使用多个类选择器，用空格隔开；
4、通配符选择器：（*表示）全局的效果；
5、后代选择器：（空格隔开）选择是后代不一定是儿子；
6、交集选择器：（中间用.连接）同时满足前后的条件；
7、并集选择器：（中间，；连接）；
8、伪类选择器：根据元素的不同状态，定义不同的样式信息。伪类又分为:
静态伪类：只能用于超链接；
动态伪类：针对所有标签都适用。
a、静态伪类：俩种状态（只能适用于超链接）
link：超链接点击前；
visited：超链接点击后；
b、动态伪类：
focus：（聚焦），是某个标签获得焦点的时候使用
hover：（鼠标停留时），鼠标放置在某个标签上时
active：（鼠标长按时），点击某个标签鼠标没有松时