前端问题集

TreeNewKing

已于 2022-07-05 00:02:09 修改

阅读量138

点赞数

分类专栏：前端文章标签：前端 css css3

于 2022-06-29 23:21:45 首次发布

本文链接：https://blog.csdn.net/qq_53600812/article/details/125530327

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题集

1.css 标签继承

2.float效果异常：

<!
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            float: left;
        }
    </style>
</head>
<body>
<h1>标题一</h1>
<p>111</p>
<h1>标题二</h1>
</body>
</html>

在这里插入图片描述
111的位置跑到第一行去了

随笔

1.background 是四个属性的结合

[平铺方式][来源][定位][颜色]
需要注意的是background-size不在这个缩写内。background-position和background-size 的属性都是差不多的格式容易搞混。

background: no-repeat url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F092320102033%2F200923102033-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659100989&t=c0029e9a418781c0718488aa55b918a9") 20% 20% red;

2.选择器优先级

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
所以在div中布局的时候。可以利用这个优先级进行初步的定位。具体的定位信息放到id选择器定义的div里面去。初始化的定位放到标签选择器里面去。

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

菜鸟demo
注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
下面是background-attachment的属性：

在这里插入图片描述

3.超连接下划线的去除

a {text-decoration:none;}

属性用法：
在这里插入图片描述

4.三种对齐

左对齐。
右对齐。
两端对齐。（可以用作铺满的效果）

5.字体大小

在这里插入图片描述

6.超链接样式变化

7.盒子模型

在这里插入图片描述
其中只有border可以设置颜色。margin和padding只能设置大小

其中margin和border不会占用元素

8.宽度，高度和行高的区别：

行高是每个block元素上下间的距离，而宽和高是一个元素占据空间的大小(占据的是一个长方形空间，达到宽度后会自动跳到下一行)

p{display:inline}
p{display:inline-block}

两者的区别：
inline 内联元素。不换行，同时也没有margin和padding。这导致元素只有宽度没有高度。
inline-block:不换行。但是有高度和宽度。
none 和hidden的区别：

p{display:none}

none 会把元素占据的位置让出来。

h1.hidden {visibility:hidden;}

而hidden会保留元素占据的空间。

9.定位

static 定位
使用后left和right等定位失效只准寻默认的定位
fixed 定位
将位置固定，元素位置不随页面滑动而改变位置
relative 定位
元素相对于默认位置进去偏移
absolute 定位
元素相对于父元素的定位
sticky 定位
relative和fixed的结合体。正常情况下效果同relative。当某个值达到阈值后成为fixed效果。

如：

    color: red;
        position: sticky;
        top: 0；

1.需要注意position：float会让元素脱离文档流。可能会导致布局问题
2.使用absolutute 定位时：

    top: -5px;
    left: 105%;

多是使用父元素的左上角作为参考，且取值可以小于0也可超过100%

10.Overflow

visible
默认值，多余的值显示到区域外
hidden
多余值不显示
scroll
提供滚动条拉去多余值
auto
同scroll
inherit
继承父元素的overflow值

11.float

取消块级元素

多个浮动元素放到一起会取消块级属性。多个float元素会排在同一行

脱离文档流
脱离文档流后很多属性就和默认的不一样了。特别是行高这种元素如果不进行设置有些时候就像是跳行了一样
clear用法
清除某个方向上的浮动布局，比如左边有一个元素float：left。那么如果这个元素放到他的后面去就会被取消块级元素。然后放到后边去。如果不想被这样。就可以使用clear:left取消掉这个布局。
float图文混排
float是设计出来作为图文混排的，图片使用浮动属性，然后文件放到它的左边或者右边。

12.对齐

居中

文本居中：

	 text-align:center;

div居中：

    margin: auto;

虽然p标签也是块级元素但是 margin：auto 不能产生居中效果（可能是auto的默认效果不一样）

左右对齐

使用float
使用position：absolute

13.选择器关系

子选择器
以空格隔开
只有一级的儿子会被包括
后代选择器
以>隔开
所有的后代选择器都会被包括
相邻兄弟选择器
以+隔开
某一个选择器后第一个元素
后继兄弟选择器
以~隔开
某一个选择器后的所有元素

14. 伪类

:first-child
绑定第一个元素
:lang（value）
绑定lang属性为value的标签

15.伪元素

:first-line
元素第一行（只对块级元素起作用）
:first-letter
首字母
:before
元素之前
:after
-元素之后

16.块级元素特点：

1.块级元素自动填满父级元素位置
常给a标签设置display：block属性此时a标签整体都可点击
这个可以用到做导航，然后a标签的背景色填满整个父元素，比如li标签。

17.属性选择器

input[type="button"]

通过某个属性和他的值定位一个标签，可以不通过class和id定位一些标签。

TreeNewKing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端问题集

1.css 标签继承[平铺方式][来源][定位][颜色]需要注意的是background-size不在这个缩写内。background-position和background-size 的属性都是差不多的格式容易搞混。2.选择器优先级CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器所以在div中布局的时候。可以利用这个优先级进行初步的定位。具体的定位信息放到id选择器定义的div里面去。初始化的定位放到标签选择
复制链接

扫一扫