首页 前端知识 html和css(2)

html和css(2)

2024-09-09 00:09:32 前端知识 前端哥 142 16 我要收藏

一、css选择器补充

1.链接伪类选择器

链接伪类选择器实际工作开发中的写法:

<!--a 是标签选择器 所有的链接-->

a {
color:red;
}

<!--:hover 是链接伪类选择器鼠标经过-->

a:hover {color:red;}

2.focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

input:focus {
background-color:yellow;}

3.结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素

E:first-child 匹配父元素中的第一个子元素E

E:last-child 匹配父元素中最后一个E元素

E:nth-child(n) 匹配父元素中的第n个子元素E

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个

.show table tbody tr:nth-child(2n+1) {
    background-color: #f7f3fd;
}

注意:类选择器、属性选择器、伪类选择器,权重为10.

nth-child (n)选择某个父元素的一个或多个特定的子元素 区别: 

(1)nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配

(2)nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E 找第n个孩子

4.后代选择器

后代选择器又称为包含选择器,可以选择父元素里面子元素。

语法: 元素1 元素2{样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素)。

例如: <!--ul里面所有的11标签元素-->

ul li {
list-style:none;
}

元素1和元素2中间用空格隔开

5.子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。

语法: 元素1>元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代(子元素)元素

例如:

<!--选择 div里面所有最近一级p标签元素-->

div>p {
    text-indent: 2em;
}

元素1和 元素2中间用大于号 隔开

二、盒子模型

1.盒子模型

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容

2.边框

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色

语法: border : border-width ||border-style ||border-color

属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框颜色

边框样式border-style 可以设置如下值:

属性值作用
none没有边框即忽略所有边框的宽度(默认值)
solid边框为单实线(最为常用的)
dashed边框为虚线

边框简写:(没有顺序)

border: 1px solid red;
border-top: 1px solid red;

边框案例

 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px blue solid;
        }
​
 div {
            border-top: 10px solid red;
        }

3.内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

添加内边距后:

(1)边框和文字有距离

(2)padding影响了盒子实际大小。如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。 解决方案:如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。

好处:让padding撑大盒子

015816e8a0d0420d83375735d103bc42.png

4.外边距(margin )

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写方式代表的意义跟 padding 完全一致。 外边距可以让块级盒子水平居中,必须满足两个条件:盒子必须指定了宽度(width),盒子左右的外边距都设置为auto 。

.header{ width:960px; margin:0 auto;}

常见的写法,以下三种都可以:

margin-left:auto;

margin-right: auto;

margin: auto; margin:0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可.

外边距合并: 使用margin 定义块元素的垂直外边距时,可能会出现外边距的合并。

主要有两种情况: (1)相邻块元素垂直外边距的合并 (2)嵌套块元素重直外边距的塌陷

5.清除内外边距

* {
padding:0;
margin:0;
}

综合案例:

6ccbe1bc7fb44d30bdf62c991478f525.png

6.圆角边框

在 CSS3中,新增了圆角边框样式,border-radius 属性用于设置元素的外边框圆角。

语法:

border-radius: length;

参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%

该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

三.浮动

1.什么是浮动?

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法:

选择器 { float:属性值;}
属性值描述
none元素不浮动
left元素向左浮动
right元素向右浮动

2.浮动特性

(1)浮动元素会脱离标准流(脱标),浮动的盒子不再保留原先的位置

(2)浮动的元素会一行内显示并且元素顶部对齐

(3)浮动的元素会具有行内块元素的特性

注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。

●如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定

●浮动的盒子中间是没有缝隙的,是紧挨着一起的

效果如下:

cb3ed5e13e1d447eac26f4f63133623c.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box {
            height: 615px;
            width: 1226px;
            background-color: aquamarine;
        }
​
        .left {
            width: 234px;
            height: 615px;
            background-color: bisque;
            float: left;
        }
​
        .right {
            width: 992px;
            height: 615px;
            float: left;
        }
​
        .right>div {
            width: 234px;
            height: 300px;
            background-color: azure;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

3.清除浮动语法:

选择器 { clear:属性值;}
属性值描述
left不允许左侧有浮动元素(清除左侧浮动的影响)
right不允许右侧有浮动元素(清除右侧浮动的影响)
both同时清除左右两侧浮动的影响

我们实际应用中,几乎只用clear: both; 清除浮动的策略是:闭合浮动.

方法:

(1)额外标签法也称为隔墙法,是W3C推荐的做法。

(2)父级添加 overflow 属性

(3)父级添加after伪元素

(4)父级添加双伪元素

四.定位

1.定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。

定位=定位模式+边偏移

(1)定位模式:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

(2)边偏移: 边偏移就是定位的盒子移动到最终位置。有top、bottom, left和 right 4个属性.

边偏移属性示例描述
toptop:80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft:80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright:80px右侧偏移量,定义元素相对于其父元素右边线的距离

(3)小结:

定位模式是否脱标移动位置是否常用
static静态定位不能使用边偏移很少
relative 相对定位否(占有位置)相对于自身位置移常用
absolute绝对定位是(不占有位置)带有定位的父级常用
fixed 固定定位是(不占有位置)浏览器可视区常用
sticky粘性定位否(占有位置)浏览器可视区当前阶段少

2.定位叠放次序z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)语法:

选择器 { z-index: 1: }

●数值可以是正整数。负整数或0,默认是auto,数值越大,盒子越靠上

●如果属性值相同,则按照书写顺序,后来居上数字后面不能加单位

●只有定位的盒子才有z-index属性 3.绝对定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中:

left:50%;:让盒子的左侧移动到父级元素的水平中心位置。

margin-left:-100px;:让盒子向左移动自身宽度的一半。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18020.html
标签
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!