如何仅在一个上厕所时间入门了前端

专注前端研究二十年

已于 2022-04-21 17:45:55 修改

阅读量233

点赞数 6

分类专栏： HTML和CSS 文章标签： html5 html css

于 2021-10-07 20:06:39 首次发布

本文链接：https://blog.csdn.net/ai_huihui/article/details/120629183

版权

HTML和CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML和CSS的一些高级用法，包括图片属性、链接行为、锚点链接、页面默认目标设定、Emmet语法、CSS布局技巧如清除内外边距、浮动元素的清除方法以及元素居中策略。此外，还探讨了文本域的样式控制和鼠标样式的设置，提供了实用的前端开发技巧。

摘要由CSDN通过智能技术生成

1.<img src="图像地址" />

src 是属性,用于指定图片的路径
alt 替换文本图像显示不出来时用文字替换
title 提示文本鼠标放在图片上显示信息

2.<a href="javascript:;" target="目标窗口弹出的方式">文本或图片 </a>

target="_blank":开始一个新窗口打开页面, "_self":默认，当前窗口打开页面。

3. 锚点链接：快速定位到页面中的某个所需位置

如<a href="#qwer"></a> <h3 id="qwer"></h3>

4.在<head>中加<base target="">可以使本页面所有超链接实现此属性。

为页面上所有链接规定默认目标：

<head>
<base target="_blank" />
</head>

5.Emmet语法：

生成div类名有顺序：div.demo$*5
像生成标签里默认文字：div{文本}*5 | div{$}*5

6.※注意： outline:none;---/*在谷歌浏览器中有默认的轮廓线*/

7.链接里面不能再放链接，<a>可以放块级元素，但给<a>转换成块级元素最可靠

8.行高

1.行高可以跟单位也可以不跟单位；
2.行高不跟单位表示文字大小的倍数；
3.如果子元素没有设置行高，则会继承父元素的行高为1.5
4.此时子元素的行高时当前子元素的文字大小*1.5
5.body行高1.5写法优势就是里面子元素可以根据自己文字大小自动调整行高。

9. 外边距合并:

①相邻块元素垂直外边距的合并:会取较大的值。 /*只设置一个值*/
②嵌套块元素垂直外边距的塌陷(合并):父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大外边距值。
/*①可以给父元素定义个上边框*/
/* ②可以给父元素定义上内边距*/
/* ③给父元素添加overflow:hidden;（溢出隐藏）*/

/*如果有定位盒子，慎用overflow:hidden*/

10. 清除内外边距:

*{
   margin:0;
   padding:0;
 }

注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换成块级或行内块元素可以。

11. 清除浮动

原因：由于父盒子很多时候不方便给高度，但子盒子浮动又不占有位置，最后父级盒子高度为0就会影响下面的标准盒子。

①（不推荐）额外标签法也称为隔墙法，w3c推荐
选择器 { clear : both; }
闭合浮动：只让浮动在父盒子内部影响。
注意：新空标签必须是块级元素！
②父级添加overflow属性
overflow:hidden/*给父元素添加*/ | auto | scroll;
③父级添加after伪元素
/* :after{ content:' '; } */

   //伪元素清除浮动代码：
   .clearfix:after {
              content: "";
              display: block;
              clear: both;
              height: 0;
              visibility: hidden;
          }

          .clearfix {
              /* IE6、7 专有 */
              *zoom: 1;
          }

④父级添加双伪元素 /*也是父元素添加*/

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table; /*block也行*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

12.元素居中的方法

①定位top50%,left50%,然后transform:translate(-50%,-50%)

②利用flex布局中的align-Items:center垂直居中，然后再justify-content:center水平居中

13.flex布局

display : flex; (弹性布局) -----默认情况下一行显示
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
/*主轴居中，主轴默认是x轴*/
justify-content: flex-start(左对齐) | flex-end(右对齐) | center | space-between | space-around;
justify-content:space-between;/*对齐方式是两边贴着边。剩余内容进行平分*/
justify-content:center; /*居中*/
justify-content:space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
flex-direction:row(默认值) | row-reverse(主轴为水平方向,起点在右端) | column | column-reverse(主轴为垂直方向,起点在下沿); /*默认主轴方向是row*/
flex-wrap: nowrap(默认,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方) ;
flex-flow: flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
align-items:flex-start(交叉轴的起点对齐) |
flex-end(交叉轴的终点对齐) |
center(交叉轴的中点对齐) |
baseline(子元素的第一行文字的基线对齐) |
stretch(如果子元素未设置高度或设为auto，将占满整个容器的高度);
align-content(定义了多根轴线的对齐方式): flex-start | flex-end | center | space-between | space-around | stretch(默认值,轴线占满整个交叉轴)
/*如果主轴是x轴，那么侧轴是y轴,侧轴就是交叉轴*/
可调margin
等比例分配: flex : 1;/*每个盒子按1:1分配*/
可调margin
注意：设为Flex布局以后，子元素float,clear,和vertaical-align属性将失效。
容器默认存在两根轴:水平主轴和垂直交叉轴。

14. 文本域

①取消表单轮廓和防止拖拽文本域：outline : none;
②禁止textarea被拖拽:resize:none;防止用户拖拽文本域破坏布局.
③textarea中不建议把双标签换行写，textarea标签完全还原HTML中的空格。
④图片或表单和文字垂直对齐: vertical-align : center ;
vertical-align: baseline(默认，按基线对齐) | top | middle | bottom; /*会让图片地测有一个空白缝隙*/
因为行内块元素和文本默认按照基线对齐，添加vertical-align:top | middle | bottom;即可；把图片转换为块级元素。
⑤单行文字语出省略号显示: white-space: nowrap; /* 1. 强制在一行显示文本，默认 normal 会自动换行 */
overflow: hidden; /*1 . 超出的部分隐藏 */
text-overflow: ellipsis; /* 2. 文字用省略号替代超出的部分 */
display: -webkit-box; /* 3. 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2; /* 4. 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */

15.鼠标样式

鼠标样式cursor: pointer | default(小白) | move(四个箭头) | text | not-allowed(禁止标志);