CSS布局学习随手笔记

最新推荐文章于 2022-11-10 00:14:26 发布

Zoe_慕子晴

最新推荐文章于 2022-11-10 00:14:26 发布

阅读量441

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/li_zhuoqing/article/details/53289684

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Web前端零基础入门，看了一周html+css，做2015百度前端技术学院的task1。感觉看起来很简单的东西，以为除了记忆标签和样式外没啥技术含量，但写起来一脸懵逼，不知道从何下手，布局过程中会遇到各种各样的问题，为什么这个div下不来，为什么那个背景色不显示……写完对比别人的代码，发现自己的代码乱糟糟的。总之是一个小白的开始hhh，看着写出来的界面还挺美的，虽然只是超简单的静态切图orz。随手记录写的过程中遇到的一些问题，代码见下一篇博文，演示效果等我学学怎么上传服务器就贴上orz。

1、设置元素水平居中 margin:auto;

2、盒模型：margin,border,padding,width

3、定位（position）：

static 默认；relative 设置偏离正常位置的属性；fixed 视窗的固定位置，页面滚动它也不动；absolute 相对于最近的被定位的父元素来定位

4、浮动（float）：清除浮动 clear:both/overflow:auto;

5、块状元素/内联元素：

块状元素：前后带有换行符，可以设置高度宽度。常见：div,p,h,form,table,ul,ol,li,address

内联元素：位于某行内，允许其他内联元素同处一行，高度宽度不起作用。常见：a,br,code,img

相互转换：css display:inline/block;

6、设置背景颜色透明渐变：

rgba(red,green,blue,rate)：参数代表颜色和透明度，不同浏览器不一样。

例：背景颜色为白色，透明度从上至下渐变为70%-50%（75%位置）-0，css代码如下：

background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%,#FFFFFF 100%); /*FF3.6+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(75%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);/*  Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#00ffffff', GradientType=0); /* IE6-9 */

7、空格： 

8、子div设置浮动后，计算时高度会按0算，如果给父类设置背景色就会不显示，此时给父类清除浮动就好了！

9、插入背景图片： background: url(../img/search.jpg) no-repeat 0 center;
调整背景图片大小：background-size: 35px 35px;

10、对table的边框设置CSS格式时，首先要将边框合并：border-spacing: 0; border-collapse: collapse;

11、常见的字体名称：

宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU
细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312

12、去除inline-block标签的间距：给父空间加font-size: 0;

13、对a可以加tab标签，来设置a的点击样式：例如a[tab-all]:hover

14、两个div设置一个左浮动，一个右浮动，两个不在同一行。在HTML里把右浮动的写在前，左浮动写在后就可以了。Why？

15、实现瀑布流效果布局用（内容分多列显示）：

方法1、设几个固定宽度的列都左浮动，在每个列里添加div就好；

方法2、用columns，直接设置分列数和列间距。但有个缺点，每列高度会自动均匀分布，可能会把图片文字拆开。columns代码：

.columns{
    width: 330px;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

分别适应不同的浏览器。