css基础

waterv 2020-06-06

1.选择器

1.基本选择器

  1. 统配选择器 *
  2. 标签选择器

    会选择到这个页面上所有的这个标签的元素

  3. 类选择器 .class名称{}

    选择所有class属性一支的标签,跨标签

  4. 4.id选择器: #id名称{}

    ? id必须保证全局唯一

    ? 不遵循就近原则

    ? 优先级: id选择器 > class选择器 > 标签选择器

2.层次选择器

  1. 后代选择器: body p{}
    1. 在某个元素的后面都有显示
  2. 子选择器: body>p{}
    1. 在某个元素的后面一代显示
  3. 相邻兄弟选择器: .active +p{}
    1. 只有同辈相邻的向下的 p元素的那一个(不包括自己)
  4. 通用兄弟选择器: .active~p{}
    1. 同辈向下的所有 p 元素(不包括自己)

3.结构伪类选择器

/* ul 的第一个子元素	子元素为 li*/   
ul li:first-child{
    background:red;
}
/* ul 的最后一个子元素*/
ul li:last-child{
}

/*选中p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效.
*	顺序/
p:nth-child(1){
}

/*选中父元素,下的p元素的第二个,	类型*/
p:nth-of-type(1){
}

4.属性选择器(常用)

属性名, 属性名 = 属性值(正则)

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾

/*都在a标签内
/*存在id属性的元素			a[]{}
	a[id]{}

id = first的元素
	a[id=first]{}

class中有links的元素
	a[class*="links"]{}

选中href中以http开头的元素
	a[href^=http]{}

选中href中以xx结尾的元素
	a[href&=http]{}

2.美化网页元素

文本的样式

  1. 颜色: color rgb rgba
  2. 文本的对齐方式 text-align =
  3. 首行缩进 text-indent=
  4. 装饰 text-decoration 下划线
  5. 文本图片水平对齐: vertical-align:middle
  6. text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径

超链接伪类

? 1.hover 鼠标悬停的状态

? 2.active 鼠标点击中的状态

3.块元素,内联元素,内联块元素之间的转换

display属性是用来设置元素的类型及隐藏的,常用的属性有:
	1.none 元素隐藏且不占位置
	2.block 元素以块元素显示
	3.inline 元素以内联元素显示
	4.inline-block 元素以内联块元素显示

4.父级边框塌陷问题

解决方案

  1. 增加父级元素的高度

  2. 增加以个空的div标签,清除浮动

    <div class="class"></div>
    	.clear{
    	clear:both;
    	margin:0;
    	padding:0;
    	}
  3. overflow

    在父级元素中增加一个 overflow:hidden
  4. 在父级添加一个伪类:after

    #father:after{
        content:‘‘;
        display:block;
        clear:both
    }

小结:

  1. 浮动元素后添加div
    1. 优点:简单
    2. 缺点:代码中尽量避免空div
  2. 设置父元素的高度
    1. 简单
    2. 元素假设有了固定高度就会被限制
  3. overflow
    1. 简单
    2. 下拉的一些场景避免使用
  4. 父类添加一个伪类:after(推荐)

5.定位

  1. 相对定位: position:relative

    相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流之中

    原来的位置会被保留

  2. 绝对定位:基于xxx定位,上下左右

    1. 没有父级元素定位的前提下,相对于游览器的定位
    2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
    3. 在父级元素的范围内移动
    4. 相对于父级或游览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流之中
  3. 固定定位

    不会随游览器移动

相关推荐

AlisaClass / 0评论 2020-06-10

somboy / 0评论 2020-05-13