最近学习前端,css太折磨了
我并不是要所谓揭秘CSS,这只是个读书笔记
之前写过css一点小知识,后来有往后看了看,没过几天就忘了…
现在的经验就是 总之就是记住重点,写点小东西.
css secrets+vanillawebprojects+Javascript30
github上还有很多小练习
学习了一会css感觉布局很重要,其他元素啥的反而直接查文档就行了
结构与布局
自适应内部元素
如果不给元素指定一个具体的height,它就会自动适应内容的高度
可以知道没有显示任何东西,如果写了内容就会随之变化1
2
3
4
5
6
7
8 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eius omnis eum accusantium delectus ipsum fuga sunt, facere quasi impedit voluptas dolorem accusamus natus error hic quod fugit deleniti perspiciatis?</p>
<figure>
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cumque perspiciatis maxime nulla animi saepe ipsum magni aspernatur nam ex natus nobis voluptatem tempora, molestias esse sed minima vero dignissimos?
</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut accusamus, repudiandae minus, placeat voluptatibus blanditiis explicabo expedita nobis distinctio velit deleniti, dignissimos totam nam debitis sit repellat officiis ratione atque?</p>
可以知道图片与文字并不一样宽.
我们希望文字与图片一样宽,而且居中.
需要解决的问题,元素宽度由内部因素而不是外部因素决定.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: aqua;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque qui reprehenderit recusandae omnis porro, illo itaque molestias exercitationem. Id ipsam delectus enim dolorum animi. Quibusdam optio ipsa culpa nulla veniam!
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eius omnis eum accusantium delectus ipsum fuga sunt, facere quasi impedit voluptas dolorem accusamus natus error hic quod fugit deleniti perspiciatis?</p>
<figure style="width: min-content;max-width: min-content; max-width: 300px; margin: auto;">
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cumque perspiciatis maxime nulla animi saepe ipsum magni aspernatur nam ex natus nobis voluptatem tempora, molestias esse sed minima vero dignissimos?
</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut accusamus, repudiandae minus, placeat voluptatibus blanditiis explicabo expedita nobis distinctio velit deleniti, dignissimos totam nam debitis sit repellat officiis ratione atque?</p>
</body>
</html>
精确控制表格列宽
表格对于不固定的内容来说显示不好
tableLayout 属性用来显示表格单元格、行、列的算法规则。
一般的表格display:table列宽不会相等,也就是说每行宽度分配不同.
如果用table-layout:fixed
```html
<!DOCTYPE html>