笔记 HTML+css

最新推荐文章于 2024-07-25 14:15:14 发布

zhaodada23

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量47

点赞数

文章标签：定位 css html js css3

本文链接：https://blog.csdn.net/qq_44002888/article/details/108081761

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>note</title>
</head>
<body>

可以通过display更改
1.行级元素、内联元素 inline(凡是带有inline的元素都有文字特性，就有文字分隔符)
文字底对齐
feature：内容决定元素所占位置
不可以通过css改变宽高

<span></span>
<a href=""></a>
<strong></strong>
<del></del>
<em></em>

2.块级元素 block
feature：独占一行
可以通过css改变宽高

<div></div> <p></p> <ul></ul> <li></li>
<ol></ol>
<form></form>
<address></address>

3.行级块元素 inline-block
feature：内容决定大小
可以改宽高

<img src="">

盒子模型
盒子三大部分

1.盒子壁 border
body默认margin为8px
2.内边距 padding

3.盒子内容 width + height 内容区

层模型
position: absolute
脱离原来位置进行定位
最近的有定位的父级进行定位，如果没有就对文档进行定位
每一个absolute 都是一个新层

position：relative
相对自己原来位置进行定位
保留原来位置进行定位

float模型
float:left/right
1.浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
2.clear属性
clear:both清楚周围的浮动流
在浮动元素的最下面加一个clear：both可以撑开父级
块级元素才能清除浮动
p

margin塌陷问题
如何触发盒子的bfc(任意一条都行)
position:absolute;
display:inline-block
float:left/right 浮动
overflow:hidden;溢出部分隐藏
position:absolute; float:left/right (报纸类布局)
会从内部把元素变成inline-block

<div class="wrapper">
    <div class="content"></div>
</div>

内联样式的权重是!important1000
id选择器的样式0100
类和伪类选择器0010
标签选择器0001
通配符选择器("*")0000
16进制

伪类选择器
当鼠标移动到上面

/伪元素天生就存在行级元素没有元素结构却可以当成元素操作/
span::before{
content: '赵大大';
}
span::after{
/伪元素清除浮动/
display: block;
clear: both;
content: '';
visibility:hidden;
height:0
}

溢出容器，打点展示
1.单行文本
white-space: nowrap;/溢出部分不换行/
overflow: hidden;/溢出部分隐藏/
text-overflow: ellipsis;/溢出部分变成.../
2.多行文本
手写... 由后端计算出来
多行只做截断

背景图片
background-image: url("#");
background-size: 200px 200px;
background-repeat:no-repeat ;/图片铺不满不重复出现/
background-position: 100px 100px;/图片出现的位置/

行级元素只能嵌套行级元素

<p><div></div></p>

不行
块级元素可以嵌套任何元素
a里面不能套a

</body>
</html>

zhaodada23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记 HTML+css

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>note</title></head><body>可以通过display更改1.行级元素、内联元素 inline(凡是带有...
复制链接

扫一扫