Web前端——css

css

推荐的样式编写顺序：

1. Positioning：定位
2. Box model：盒子模型、大小等
3. Typographic：文字系列、排印等
4. Visual：可视化、背景等
5. Misc：其它混杂模式

居中

垂直居中，设置line-height
水平方向 text-align

flex 弹性盒子

其实就是一个百分比布局，使用这个的时候，子元素的宽高会受限制于弹性盒子

 
 





  
flex item 1
  
flex item 2
  
flex item 3
  

设置背景为图片的一部分

background-image:url() -140px 0px;

计算机中，左上角为原点，x正方向是右，y轴正方向是下
图片偏移设置背景 -140 以html底部作为参考物，图片自身向左移动，所以是负的

鼠标滑过更改样式

:hover也是属于css选择器中的一种，鼠标悬浮在元素上，元素的样式，可以使用这个来达到鼠标滑动改变样式的效果

“>” 代表着是只选择子代元素，而空格则代表选中后代元素

• a:link {color: #FF0000} /* 未访问的链接 */
• a:visited {color: #00FF00} /* 已访问的链接 */
• a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
• a:active {color: #0000FF} /* 选定的链接 */

        

            
首页
            
女人
            
箱包
            
美容
            
男人
            
运动
            
数码
            
热销榜
            
婚庆
            
户外
            
美食
        
        
    

float 浮动与clear

使用此样式的元素需要设置宽度，否则，它们会尽可能地窄。

使用float浮动，会影响到其他的元素，所以使用clear属性

clear可以both，left，right

both两边都不能出现浮动元素，left是左边不能出现浮动元素，right是右边不能出现浮动元素

下面的效果链接中的.text_line如果没有clear属性，文字就会挤在尾部，宽度不够大的话，文字还会变成竖排
float效果链接

例子1：竖排三个div

例子2：使用float，水平排列div

如果宽度不够的话，会自动换行

例子3:外层div包含浮动元素（使用clear)

修改外层div的位置，浮动元素的位置也会随之改变

例子4：外层div包含浮动元素（外层div也设置为float)

修改外层div的位置，浮动元素的位置也会随之改变