html css 易忘知识点1
1.class/id的调用
.test {
font-size: 30px;
}
#red {
color: red;
}
<body>
<div class="test" id="red">
something
</div>
</body>
2.margin的问题
(1)同时写margin-left和margin-right会忽略right.
(2)子父集在垂直方向上只能有一个margin-top生效,谁大谁生效.
子集写margin-top会造成与父集边框合并,塌陷.
(3)同级两个块,上面有margin-bottom,下面有margin-top,取大的
3.padding会撑大盒子
解决办法
box-sizing: border-box;
4.position三种定位
(1)absolute:想改变谁的位置就给谁加绝对定位,默认参照的是已定位的最近父级,父级relative或absolute都可以
绝对定位的元素会脱离文档流,断绝父子级关系,但通常来说,relative是加在父级身上的,所以看上去没有断绝关系.
margin:auto;
会失效,即使父级加了relative也不行
(2)relative是父级
(3)fixed固定定位的元素会悬浮,不占位置
定位的问题很多,很难维护,通常用margin和padding解决问题
5.float浮动
float浮动之后依然能继承父级宽度,但必须要写明宽度,不写则为0,有子集则为子集宽度.
只要浮动了就要清除浮动,不管外部盒子有没有高度.
.clr {
clear: both;
}
然后在浮动的盒子后面(同级)加一个盒子,这个新加的盒子要调用这个类.
6.ul和li
通常在开头就清除li的格式
li {
list-style:none;
}
最接近div的标签,导航条用得多
7.display
display: none;
隐藏
尽量不让块元素和行内元素互换,
display: inline-block;变行内块元素也尽量不用.
8.链接a标签
a标签自带下划线样式,若清除则需要设置
a {
text-decoration: none;
}
a标签默认target为自身_self
可以设置
target="_self"
target="_blank"
_blank是在新标签中打开
9.tips
(1)元素默认宽度是父级的100%,默认高度是0,若有子集,则高度由子集高度决定
给元素高度设置为100%是父级的高度,但父级是body不可以.
可以设置
height:100vh;
width:100vw;
vh-----view height
vw-----view width
css3把显示器横纵向分别分成100个视图
(2)z-index默认是零,可以设置为……-3、-2、-1、0、1、2、3 ……只对加了绝对定位的元素生效.
(3)给元素加下划线、中划线、上划线
text-decoration:underline;
text-decoration:line-through;
text-decoration:overline;
(4)边框
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
四个是上、右、下、左
三个是上、右、下
两个是上下、左右
一个是全部
（5）UI设计中黑色通常用#333
因为#000太亮了
(6)划块原则:同一级的元素,不允许既在一行显示,又在一列显示
(7)通常在代码开头就设置
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration:none;
}
(8)内联元素不能套块元素
(9)文字垂直居中
font-size: 16px;
line-height: 30px;
text-align:centere;
30px是它外面块的高度,所以让文本和块一样高,line-height是行间距,包括文字高度和两行之间的空白距离,所以文字是16px,上下会用同样高(7px)的空白补全.
(10)如果希望鼠标划过一个元素改变另一个元素的样式,那么必须保证要改变的元素是鼠标划过的元素的子集,若不是子集可通过JS实现.
(11)::before 和 ::after
不要忘记
content:'';
(12)引入图片的方式
body里
<img src="img/xxx.png" alt="">
或样式里设置
background: url(img/xxx.png) no-repeat center;
背景图不要忘了no-repeat!
引入背景图的块必须设置宽高,不然不会显示.
直接引入就是背景图原本的大小,
若图比块大,则图只显示一部分,
若图必块小,则图默认会平铺,重复排列,铺满为止
改变背景图的位置,
background: url(xxx.png) no-repeat center;
居中
background: url(xxx.png) no-repeat 10px 20px;
x y的坐标分别为10px和20px
(13)给网页插入一个大背景图的方式
如果要写全屏banner图,
不要给这个块用 width: 100%; 因为若显示器分辨率比图大,则会拉伸,出现马赛克
要用如下方法:
.ban {
background: url(img/ban.png) no-repeat center;
height: 600px;
}
不要给宽度,块的宽度和窗口一样宽,并且加了center,所以图片会居中显示.
缩小窗口时,图片两侧会隐藏,但通常没有重要内容.
(14)市面上显示屏分辨率
通常为1960px,最小为1200px.
(15)border-radius顺序
左上、右上、右下、左下
(16)块居中方法
绝对定位-----left: 50%;-----margin-left:-27px;
.box {
position: absolute;
left: 50%;
margin-left:-27px;//27是块宽度的一半
}
(17)字体加粗
font-weight: bold;
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
