html中的小问题回顾

一方1

已于 2022-10-26 15:54:04 修改

阅读量210

点赞数

文章标签： html css css3

于 2022-10-26 12:22:15 首次发布

本文链接：https://blog.csdn.net/m0_67737085/article/details/127530085

版权

1.行内元素设置文本域

当一个行类元素设置文本域时，它有多少文本内容，便显示多少，这时需要用display：block；变为块级元素，后面的文本域便会重新显示

2.清除链接下划线

text-decoration: none;

3.设置水平和垂直居中

text-align: center;
line-height: 100px;

line-height: 100px这个元素与height同高时便是上下居中.

4.清除列表前面的小黑点。

list-style: none;

5.背景透明度

opacity:0.5（此处值为0-1）;   背景透明度

6.display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性会失效。

7.两端对齐

justify-content: space-between;

8.y轴方向居中

/*y轴方向居中*/

align-items: center;

9.img在div中居中的问题

img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中）。

10.定位的上下居中

position: absolute;     ///
width: 24px;
height: 20px;
background-color:cadetblue;
right: 128px;
top: 50%;              //
transform: translateY(-50%);  //

11.鼠标样式移动到此处变为小手

cursor: pointer;        /*移动到此处变为小手*/

12.搜索框选中变色

让搜索框在选中时发生颜色的变化

.in1:focus{
    outline: none;
    border: 2px solid #4e6ef2;

13.在父子盒子嵌套下，让子盒子居中的方式：

第一种方法：margin: 0 auto，使用边框，但是margin使用会影响其他盒子的使用，不太推荐使用；
第二种方法：position，使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半，这是最常用的方法;
第三种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center;
第四种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px);
第五种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0；

补充：在第五种方法上，加上top:0,bottom:0，可以实现垂直和水平都居中

15.变换延迟，旋转

transition: all 0.5s; 变换延迟

transform: rotate(360deg); 旋转

16.行内元素设置宽高

内元素直接设置宽高是无效的。给它设置display:block或者display:inline-block就可以了

1、常用的行内元素
标签可定义锚
表示一个缩写形式
定义只取首字母缩写
字体加粗

可覆盖默认的文本方向
大号字体加粗

换行
引用进行定义
定义计算机代码文本定义一个定义项目定义为强调的内容斜体文本效果向网页中嵌入一幅图像输入框定义键盘文本标签为 input 元素定义标注（标记）定义短的引用定义样本文本创建单选或多选菜单呈现小号字体效果组合文档中的行内元素语气更强的强调的内容 _{定义下标文本 ^{定义上标文本}}

多行的文本输入控件打字机或者等宽的文本效果定义变量 2、行内元素是不能设置宽高的 ```html

你爱我，我爱你，蜜雪冰城甜蜜蜜。

```

我们给行内元素设置了宽高，但是并没有什么用。

3、行内元素设置宽高的三种方法
1、行内元素转换为块级元素或行内块元素

span{
display: block;
}
或者
span{
display: inline-block;
}

2、给行内元素添加浮动

span{ 
	float:left; 
} 
或
span{ 
	float:right; 
}

3、给行内元素添加绝对定位或固定定位

span{ 
	position:absolute
} 
或
span{
	position:fixed

但是相对定位、粘性定位等不能
通过调试工具不难发现，float和position方法有一个共同的表现：**display：block，**这是隐式改变了display的类型，也就是说以上三种方法的原理是一致的。
总结：设置了float为(left/right)或者position为absolute/fixed的元素将自动变为块级元素，可直接设置宽高，无需再添加：display:block;

17.Jquery的html返回文本内容

//3.点击显示选择城市的名字

  $(":submit").click(function(){

    var city= $("select>option:selected").html()    //选择option的标签文本

    //city=$('select').val()     //选择的option的value属性

    alert(city)

我们这里的html返回文本内容，若是不带selected便只返回第一个文本，带上返回选中内容

18.为什么给li设置左浮动之后不是紧贴着父元素左边，而是会空出一段距离

ul是有默认margin和padding的，你可以设置他的margin,padding为0.

19.overflow形成一个小的文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery.js"></script>
    <style>
        div{
            border: 1px red solid;
            width: 100px;
            height: 150px;
            overflow: auto;   /
        }
    </style>
</head>
<body>
    <div>
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
        11111111111111111111111111111111111111111
    </div>
</body>
</html>

20.块级元素如何在父元素中水平垂直居中的4种方式

块级元素如何在父元素中水平垂直居中
1.给父元素设置display:flex伸缩盒布局;
并且设置:
align-items:center;
justify-content:center;
2.给父元素一个定位属性，子元素使用绝对定位，并且使用配合属性left:50%;top:50%;让子元素左上角移动到父元素中心位置；然后再让子元素使用margin-left:-width/2;margin-top:-height/2;

3.给父元素一个定位属性，给子元素一个绝对定位。然后给子元素的所有配合属性设置为0px(top/left/top/bottom)并且给子元素设置margin:auto

4.给父元素设置一个display:flex;子元素设置margin:auto