CSS布局小技巧

1.让文字在盒子里垂直居中:把文字的行高设置为盒子的高度即可实现文字垂直居中。

2.图片的垂直居中:vertical-align:middle;

3.color和backgroundcolor的区别?

color文字颜色
background-color背景色
4.填充padding的使用。
CSS Padding(填充)属性定义元素边框与元素内容之间的空间。例如有一个文本框的宽度是30px,如果在文本框内输入的内容太长,则有可能覆盖文本框的背景图片,为了解决这个问题,可以设置文本框的右边距为20px,即padding-right:20px;

5.background和background-color的区别

background 可以设置 背景颜色、背景图片、定位等 

background-color 只能设置 背景颜色 

设置background-color: #aaa;时仅仅改变了背景色,但此时有一个默认的的background:repeat; 

而设置background: #aaa;后,相当于同时设置了background:no-repeat; 

既{background-color: #aaa;background:no-repeat;}=={background: #aaa;}

6.布局时为了兼容IE浏览器,一般把span标签放在li的考前位置。例如:<li><span>2014-1-4</span><a href="news.html">【慕课访谈 用户篇】“有位屌丝”在路上</a></li>。

7.给内联元素设置宽,高,margin,padding等属性无作用,解决方法是:给span设置display:inline-block.

  • 一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> 。

8.有些样式需要应用于所有网页。可以用通用选择器,即*{}。

9.文本样式,1.文本缩进:text-indent 。例如:p {text-indent: 5em;} 

10.布局时,有些盒子的内容偏多,如果设置固定的盒子宽度,责可能造成内容过多溢出,为了解决这个问题,可以给盒子设置最小的高度。即:min-height:299px;这样设置后,同时还能解决内容自适应时的盒子边框问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值