一些css小问题

块级元素,引用百度百科块级元素特点:

①总是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素

行级元素,引用百度百科块级元素特点:

①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素

(‘缺省’我也不知道是什么鬼,可能是百度写错了,理解成默认就好)
直白点说,块级元素独占一行,你写两个块级元素,第二个会出现在第一个下方,这个可以通过浮动控制。块级元素的宽高都是可以设置的,而行级元素是不可以的。所以,有时候你需要设置行级元素的宽高的时候,可以加上display:block;转化为块级元素就可以设置宽高了。有时候浮动不能解决两个块级元素在同一行的时候,不妨试试display:inline;常见的块级元素行级元素有哪些我就不赘述了,可以参考下百度百科百度百科-常用块行级元素

再来说说居中方法;
只说最简单的:上下居中:margin: auto 0; 左右居中:margin: 0 auto; 内部元素上下居中:vertical-align:middle;内部元素左右居中:text-align:center;上下左右都居中请参考div上下左右居中

现在写宽度我都习惯用百分比了,所以居中的话常用margin-left/top:x%;这种的话只能非常靠近不能说百分百居中了。惭愧,自学的,不够系统。才工作两周,也是为了积累才写文章,相信一两年后我的文章质量会提升很多。

再说下如何减少css代码工作量,很多标签大部分要写的属性都一样,所以可以刚开始就全局设置下,比如a{text-decoration;color:### ;...}如果后面需要的a的样式一致,就不用再重复写了,不一样的地方就用选择器在具体的地方写下所需要的属性,可以覆盖掉之前写的,又不影响后面继续使用。另外Autoprefixer问题(就是浏览器内核前缀)可以用工具比如gulp代替完成不需要自己手写,(血和泪的教训,没人带,只能自己慢慢摸了)。
有写的不对的地方请指正,毕竟萌新~

关键字:css, 元素, 居中, 宽度

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部