- Age:
- 20
- Gender:
- Male
- Height:
- 180cm
摘要：在我们写代码的过程中，可以养成记录一些小技巧的习惯。不到万不得已，尽量少使用或在可控范围内使用。可以在缩小浏览器窗口时等比例缩放。但此时不能加左右的，否则总宽度会超过的宽度。我们为达到目的让同一类和左右排布不同类上下排布。
在我们写CSS代码的过程中，可以养成记录一些小技巧的习惯。
1.一般特定的元素都有自己默认的样式，但是在我们的整体布局中，可能适得其反。
我们可以去掉其默认样式。
* {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
等等
2.border大法
在调试一个盒子的时候，我们可以为其加上边框。更易于直观地看出盒子的位置以及样式。
.bd {
border: 1px solid red;
}
3.
一定要善用Chrome开发者工具检查网页代码。
可以在网页结构上直接作出暂时性的修改，非常的方便。还可以查看每个元素的样式。
关于这点我们在之后的博客进行详细说明。
尽量少用width和height这两个属性。
在定义元素的高度时，我们知道一个元素的高度是由内容决定的，比如div高度由其内部文档流高度总和决定。
这样直接用width输入像素值，很容易造成内部溢出而显示错误或超出范围。
在定义元素高度时，如果直接用height输入像素也会因一些变化或其他css样式而引起显示问题。不到万不得已，尽量少使用或在可控范围内使用。
我们可以根据实际大小位置需要，用margin和padding控制元素的位置以及样式大小。
5.如果要规定div的宽度，尽量使用max-width。可以在缩小浏览器窗口时等比例缩放。
max-width: 600px;6.
固定定位
position: fixed; top: 0; left: 0;
一般在制作导航栏时会用到固定定位，使该元素脱离文档流，可以相对于屏幕固定。
但是固定定位会导致元素样式收缩，可以用width: 100%;来解决。
但此时不能加左右的padding，否则总宽度会超过body的宽度。
解决办法是给一个父元素div 可以用来调整padding和margin。
div宽度无法超过body，而且会自适应。
.parentNav {
padding: 0 6px;
}
.parentNav .topNavBar {
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
width: 100%;
}
7.
如何实现dl中的dt和dd左右布局？
将dt和dd一起设置通向浮动后，发现所有元素并排排在一起；虽然自动换行，但是是无序的。
我们为达到目的：让同一类dt和dd左右排布；不同类上下排布。
可以利用自动换行的原理，为dt和dd分别设置百分比宽度，总和达到100%即可。
同时用padding调节上下间距。
- Age:
- 20
- Gender:
- Male
- Height:
- 180cm
.text dl dt {
float: left;
width: 30%;
padding: 6px 0;
}
.text dl dd {
float: left;
width: 70%;
padding: 6px 0;
}
持续更新中...
Written by：EdenSheng
Email：singlesaulwork@gmail.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117061.html
摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
阅读 1292·2021-11-24 09:38
阅读 3180·2021-11-18 10:02
阅读 3020·2021-09-22 15:29
阅读 2760·2021-09-22 15:15
阅读 867·2021-09-13 10:25
阅读 1571·2021-08-17 10:13
阅读 1730·2021-08-04 11:13
阅读 1813·2019-08-30 15:54
