html与css进阶

最新推荐文章于 2024-05-12 02:40:00 发布

余余余鱼

最新推荐文章于 2024-05-12 02:40:00 发布

阅读量144

点赞数 1

分类专栏： html笔记

html笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

0.书写规范

1.html5中可以省略属性值的属性

checked
readonly
defer
ismap
nohref
noshade
nowrap
selected
disabled
multiple
noresize

2.对页面关键结构或者大结构采用id，LOGO，导航，主体内容，底部信息栏

3.浏览器标题图标

<link rel="shortcut icon" type="image/x-icon" href="...">

4.图片与图注

<figure>
    <img alt="" src=""/>
    <figcaption>图注</figcaption>
</figure>

5.fieldset和legend，增强表单语义

6.<br/>只能用于p标签内换行

7.图片仅起装饰作用，并不想被搜索引擎识别，使用背景图片

8.1px，%，1em，1rem

1px,1像素，1张图片中的最小的点

width、height、font-size的百分比是相对父元素相同属性的值计算的
line-height的百分比相对于父元素font-size 的值计算的
vertical-alin的百分比相对于当前元素的line-height值计算的

相对于“当前元素”的字体大小而言的
浏览器默认字体大小16px
首行缩进text-indent：2em
简化font-size 的计算，声明body{ font-size:62.5%;),相当于1em=10px
修改整体的文字大小时候，只需要修改根元素字体大小

rem（兼容性问题）

9.CSS的继承性和层叠性

10.CSS的层叠性

后来者居上：元素、属性和权重相同

11.CSS的优先级

行内样式>内部样式>外部样式

CSS选择器优先级（底部为权值）
行内样式	id选择器	class选择器	元素选择器	通配符*
		伪类	伪元素
		属性选择器
1000	100	10	1	0

CSS选择器权重仅针对当前样式，并不用于继承样式

伪元素：：（pseudo-element）是HTML 中并不存在的元素。用于将特殊的效果添加到某些选择器。

：：before，：：after，：：first-letter，：：first-line

伪类：是用来添加一些选择器的特殊效果。

:hover :first-child

强势覆盖样式(!important)

strong{
    color:Black !important
}

12.CSS选择器

★俩个元素之间实现效果（border、margin）使用"li+li(border-top:2px solid red;}

13.css盒子模型

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS盒子模型</title>
    <style type="text/css">
        .main{
        	display: inline-block;
        	border: 1px solid red;
        }
       .lvye{
       	display: inline-block;
       	padding: 20px;
       	margin: 20px;
       	border: 1px solid black;
       }
       span{
       	border: 1px solid cadetblue;
       }
    </style>
</head>
<body>
    <div class="main">
    	<div class="lvye">
    		<span>内外边距</span>
    	</div>
    </div>
</body>
</html>

14.border:none与border:0,前者不占用内存

15.外边距叠加（为了更好的对文章进行排版）

含义：俩个垂直外边距相遇时，会合并成为一个外边距，这个外边距的大小为合并前较大的外边距

三种情况：同级元素，父子元素和空元素

同级元素：上下俩个元素，上面元素设置下边距，下面元素设置上边距，俩个外边距会发生合并

父子元素：父子元素，如果没有border和padding把外边距隔开的话，上下外边距也会发生合并

空元素：一个空元素有上下外边距时，如果没有border或padding，元素的上边距与下边距会发生合并

解决方案（https://www.cnblogs.com/star91/p/5453244.html）

触发BFC，使得margin不重叠

父元素

overflow:hidden

padding或border(仅在父子级元素中）

子元素

float:left

display:inline-block

position:absolute

同级（创建父元素设置overflow:hidden）

余余余鱼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html与css进阶

0.书写规范1.html5中可以省略属性值的属性checked readonly defer ismap nohref noshade nowrap selected disabled multiple noresize2.对页面关键结构或者大结构采用id，LOGO，导航，主体内容，底部信息栏3.浏览器标题图标<link rel="shortcut i...
复制链接

扫一扫