当前位置: 首页 > Web前端 > CSS

CSS小技巧(二):布局

时间:2023-03-30 16:29:05 CSS

在编写CSS代码的过程中,我们可以养成记录一些小技巧的习惯。1、一般来说,具体的元素都有自己的默认样式,但是在我们的整体布局中,可能会适得其反。我们可以删除它的默认样式。*{保证金:0;填充:0;}a{颜色:继承;text-decoration:none;}ul,ol{list-style:none;}h1,h2,h3,h4,h5,h6{font-weight:normal;}等等2.边框大法在调试一个盒子的时候,我们可以为其添加边框。更容易直观地看出盒子的位置和样式。

.bd{border:1pxsolidred;}3.一定要用好Chrome开发者工具检查网页代码。临时修改可以直接在网页结构上进行,非常方便。您还可以查看每个元素的样式。我们将在以后的博客中对此进行详细说明。4.尽量少用width和height属性。在定义元素的高度时,我们知道元素的高度是由内容决定的,比如div的高度是由其内部文档流的高度之和决定的。这样直接用width输入像素值很容易造成内部溢出显示错误或者超出范围。在定义元素的高度时,如果直接用高度输入像素,也会因为某些变化或其他css样式导致显示问题。不得已,尽量少用或在可控范围内使用。我们可以根据实际大小和位置需要,使用margin和padding来控制元素的位置和样式大小。5.如果要指定div的宽度,尽量使用max-width。当浏览器窗口缩小时,它可以按比例缩放。最大宽度:600px;6、固定定位位置:固定;顶部:0;左:0;一般在制作导航栏的时候会使用固定定位,让元素脱离文档流,可以相对于屏幕固定。
但是固定定位会导致元素样式缩小,可以用width:100%;解决。但是此时不能添加左右padding,否则总宽度会超过body的宽度。解决办法是给一个父元素div,可以用来调整padding和margin。div的宽度不能超过body,会自适应。.parentNav{padding:06px;}.parentNav.topNavBar{position:fixed;顶部:0;左:0;填充:24px0;width:100%;}7、dl中dt和dd的左右布局如何实现?将dt和dd设置在一起导致浮动后,发现所有元素并排排列;尽管它们会自动换行,但它们出现了故障。我们要达到的目的:让同类型的dt和dd左右排列;不同的类型上下排列。可以利用自动换行的原理,给dt和dd分别设置百分比宽度,总和可以达到100%。同时使用padding调整上下间距。
年龄:
20
性别:
身高:
180cm
.textdldt{float:left;宽度:30%;填充:6px0;}.textdldd{float:left;宽度:70%;padding:6px0;}持续更新中...作者:EdenSheng邮箱:singlesaulwork@gmail.com