CSS样式中的line-height属性
属性名:行高line-height
一、作用: 控制一行的上下行间距。
二、取值: 数字+px,如 { line-height:15px };
倍数(当前标签font-size的倍数),如 { line-height:1.5 }。
三、应用:
1.让单行文本 等行内或行内块元素 垂直居中,可以设置line-height:其父元素高度。
2.网页精准布局时,会设置line-height:1可以取消上下间距。
四、行高与font连写的注意点:
如果同时设置了行高和font连写,注意覆盖问题:
font:style weight size/line-height family。
HTML中的【行内、行内块、块元素】注意事项:
1.一行可显示多个元素
2.行内元素靠自身内容撑起高度和宽度
3.设置宽高无效
※想要设置宽高生效,则改为【块级元素】或【行内块元素】
※显示模式转换方式:
转块级元素:display:block;(常用)
转行内块元素:display:inline-block;(常用)
转行内元素:display:inline;(少用)
注意:使用::before、::after添加的伪元素具有行内元素特点。
使用::before、::after添加的伪元素
伪元素:使用css模拟出来的标签元素
1.具有行内元素特点
2.必须添加 content属性才生效,即便为空,如 content:‘’;
CSS3盒模型(自动内减-内减模式)
需求:
盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?给盒子
设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
解决方法①:手动内减
操作:自己计算多余大小,手动在内容中减去·缺点:项目中计算量太大,很麻烦。
解决方法②:自动内减
操作:给盒子设置属性box-sizing:border-box;即可。(常常在公共CSS中有,只需要在所需盒子标签中调用该class属性即可使用。
优点:浏览器会自动计算多余大小,自动在内容中减去。
CSS清楚默认样式 *{magin:0;pading:0};
浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续需要再自己设置。
css代码:*{magin:0;pading:0};
CSS版心居中 wapper{margin:0,auto;}
版心居中,一般用wapper作为类名,放在公共样式css中,方便给需要使用版心居中的标签调用。css代码:wapper{margin:0,auto;}
网页布局的方法:标准流、浮动、定位
1.标准流<浮动<定位
2.受浮动影响的情况及其解决方法
情况:如果上一个父盒子中有多个子元素浮动了,而且父盒子又没有高度,或者高度不够其中的多个子元素的高度,那么下面的父盒子(上下父盒子是兄弟关系)的布局会受到影响。
解决方法:清除浮动(五种方法)
方法①(加高法):
给上面一个父盒子一个合适的高度height:n px。
(缺点:有时候盒子不能加高,靠内容撑起高度)
方法② (额外标签法):
在上面一个父盒子里面内容的最后加一个块级元素,
然后给添加的块级元素设置clear:both;来清楚左右两边的浮动影响
(缺点:添加额外标签,HTML结构太乱)
方法③( 单伪元素清除法):
操作:用伪元素替代额外标签。在css添加下面代码(一般项目经理准备好的)。然后在需要清楚浮动的标签(上一个父盒子)添加class:“clearfix”类即可。(优点:方便)
基本写法:
.clearfix::after {
content:"";
display:block;
clear:both;
}
补充写法:
.clearfix::after {
content:"";
display:block;
clear:both;
//补充代码,隐藏额外标签
height:0;
visibility:hiddent;
}
方法④( 双伪伪元素清除法):类似方法三,只是css代码不同。(此时clearfix这个类还可以用在解决外边距塌陷问题,说明如图) 优点:一举两得!!
方法⑤:给父元素(上一个盒子)设置overflow:hidden;(优点:最简单)
有关CSS的定位问题
定位:可以将元素放在网页的任意一个位置
常见场景:①一个盒子叠在另外一个盒子上面的情况。定位后的盒子层级最高,在最上层。(相对、绝对)
②将盒子固定在【屏幕】的某个位置。(固定定位)
使用定位的步骤:
一、静态定位static(一般没用)
二、 相对定位relative
三、绝对定位absolute
子绝父相:因为父元素定位了,子元素参照父元素定位。父元素没有定位,子元素参照浏览器定位。
绝对定位 后的元素具有行内块元素特点,设置宽高生效。
四、固定定位fixed
固定定位 后的元素具有行内块元素特点,设置宽高生效。
五、层级定位的方法(略)
水平方向居中text-align
垂直方向对齐方式的vertical-align(专治垂直方向的不对齐)
父盒子需要设置行高才生效!!
SEO简介
1.在网页logo的位置设置隐藏的网站名称。
三大标签的内容都是项目经理准备好的,只需复制粘贴。
2022.3.8完!