CSS布局技巧与问题解决-优快云博客

本文链接：https://blog.youkuaiyun.com/zhuxu820_/article/details/79570635

text-align: center 是水平方向的居中
line-height: 50px; 是纵向方向的居中
/*悬浮触发dropdown*/
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
填充父布局
width: 100%;
height: 100%;
display: inline-table;

bootstrap 轮播图

 $('.carousel').carousel({
            interval: 2000,//轮播间隔
            pause:"hover", //鼠标悬停在轮播图上，是否停止滚动
            wrap:true,     //
            keyboard:true  //响应键盘事件
          });

父布局鼠标悬停显示
.prevstyle{
display: none;
}
.carouselfather:hover .prevstyle{
display: block;
}
垂直居中

使用css3的新属性transform:translate(x,y)属性

.eight{
position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
需要自适应的img 应该用
background<div style="background:url('http://demo15.xuanyuannet.com/uploads/allimg/180101/1-1P1011Z1080-L.jpg') no-repeat 50% 50% ;width: 100%;height: 560px"></div>
子元素设置margin导致父元素产生边距
```
margin不会继承，继承也是子元素继承父元素~你遇到的是Margin垂直外边距合并问题，
```
```
外边距合并
```
指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
　　垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
　　这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
　　再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
　　对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。解决方法：
①、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
②、为父元素添加overflow：hidden；样式即可（完美）
③、为父元素或者子元素声明浮动（float：left；可用）
④、为父元素添加border（border:1px solid transparent可用）
⑤、为父元素或者子元素声明绝对定位
自动截断文字并且添加省略号的方法一
/*.servicebox p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}*/
自动截断文字并且添加省略号方法二
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
这三个是css的基础属性，需要记得。
但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
css3解决了这个问题，解决方法如下：
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
最后的css样式如下：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
UL高度为0
由于项目中使用ul+li的布局方式，在ie8、chrome浏览器中，包裹浮动的li元素的外层ul高度为0，ie7浏览器和ie8兼容模式显示正常，这是典型的浏览器兼容性问题。
解决办法：
第一种：设置ul的style属性
代码如下: overflow:hidden;//超出元素纬度范围的内容的可见性：隐藏
第二种：设置ul的style属性
代码如下: float:left; //浮动：左
第三种：在ul标记内加空div
代码如下: <div style=" clear:both; visibility:hidden;">

CSS设置width100%与padding后宽度溢出超出父节点解决方法
在CSS中如果设置 width:100%，同时设置了padding后，宽度会超出父节点。等于实际宽度=100%+padding的宽度，这对我们的布局需求造成一定的困扰。

但使用CSS3中的box-sizing属性即可解决这个问题

比如：

1

2

3

4

 
        .box {width: 100px;  height: 100px;  background: red;} 
       
 
        .boxx {width: 100%;  padding: 10px;  background: black;} 
       

           
       
 
        < 
        div  
        class 
        = 
        "box" 
        >< 
        div  
        class 
        = 
        "boxx" 
        ></ 
        div 
        > </ 
        div 
        > 
       

那么boxx的实际宽度会超出box的宽度，

这时，只需给box添加 box-sizing:border-box; 属性即可解决

1

2

3

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
纵向文字
width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px;

html 个人笔记