CSS进阶-黑马程序员-前端零基础

最新推荐文章于 2024-07-25 15:44:34 发布

羊羊的代码笔记本

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量99

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_73579310/article/details/128394791

版权

1.选择器进阶

后代选择器：空格	选择器1 选择器2{ CSS }	后代，儿子孙子重孙子
子代选择器：>	选择器1 > 选择器2{ CSS }	儿子
并集选择器	选择器1，选择器2{ CSS }	同时选择多组标签，设置相同的样式（建议每写一个选择器换一行）
交集选择器	选择器1选择器2{ CSS }	p.box

1.1hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式

选择器：hover { CSS }

1.2emmet语法

    <!-- 生成div带类名 -->
    .box
    <div class="box"></div>
    p.box
    <p class="box"></p>
    <!-- div 同级 p + -->
    div+p
    <div></div>
    <p></p>
    <!-- 父子 > -->
    div>p
    <div>
        <p></p>
    </div>
    <!-- ul 有4个li *乘号 -->
    ul>li*4
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    ul>li{111}*3
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

w300+h500+bgc回车，这个很常用

2.背景相关属性

2.1背景图片

background-image（bgi）

background-image：url（'图片的路径');

这里的引号可以省略

2.2背景平铺

background-repeat (bgr)

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

2.3背景位置

background-position （bgp）

background-position：水平方向位置垂直方向位置；（空格隔开）

属性值	方位名词	水平方向	left center right
		垂直方向	top center bottom
	数字+px（坐标）	坐标系	原点（0，0）盒子的左上角
			x轴水平向右 y轴垂直向下

3.元素显示模式

块级元素	独占一行，可以设置宽高	div,p,h,ul,li,dl,dt,form,header
行内元素	一行可以显示多个，高度和宽度默认由内容撑开，不可以设置高宽	span,a,b,u,i,s,strong,ins,em
行内块元素	一行可显示多个，可以设置宽高	input,textarea,button,select,img

3.1转换

改变元素默认的显示特点，让元素符合布局要求

属性	效果	使用频率
display：block	转化成块级元素	较多
display：inline-block	转化成行内块元素	较多
display：inline	转化成行内元素	较少

一个新的发现

            width: 100px;
            height: 50px;
           
            text-align: center;
            line-height: 50px;
            /* 设置行高还有水平居中，可以让文字在框架中居中显示 */