当前位置： 移动技术网 > IT编程>网页制作>CSS > css杂项补充

css杂项补充

2018年09月27日  | 移动技术网IT编程  | 我要评论

mm脱内衣,www.6633.us,让生命充满爱演讲稿

css杂项补充

一、块与内联

1.块

  • 独行显示
  • 支持宽高，宽度默认适应父级，高度默认由子级或内容撑开
  • 设置宽高后，采用设置的宽高

2.内联

  • 同行显示
  • 不支持宽高
  • margin上下无效果，左右会起作用，padding不会影响它的高度，背景会影响。
  • 一般不设置内联的margin和padding

3.内联块

  • 同行显示，之间有间距(间距产生原因是空格)
  • 支持宽高，宽高由内容撑开
  • 可以设置宽高，设置其中一个，另一个等比缩放

二、属性补充

1.overflow

指定内容溢出元素的框，会发生什么。

值 描述
visible 默认值
hidden 内容被修剪，超出内容不可见
scroll 内容被修剪，滚动条显示
auto 如果内容超出，便修剪，滚动条显示
inherit 从父元素继承

三、隐藏

盒子之间会相互影响，可以设置隐藏

1.以背景颜色透明度隐藏(了解)

background-color: transparent;

盒子还在，内容或子级标签会被显示，例如盒子中有文本，盒子被隐藏，文本会被显示

2.以盒子透明度隐藏

opacity: 0;
值:0~1

盒子真正意义上透明，但盒子区域占位还在

3.display

display:none;

将盒子从文档中移除，盒子的区域占位消失，当盒子重新获得显示时，该盒子依旧从消失位置显示。

四、画图

1.画梯形

html:
<div class="bd"></div>

css:
.bd {
    width: 100px;
    height: 100px;
    background-color: transparent;
}
.bd {
    /*border: 50px solid orange;*/
    border-top: 50px solid orange;
    /*border-right: 50px solid cyan;*/
    /*border-bottom: 50px solid yellow;*/
    /*border-left: 50px solid blue;*/
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
}

通过设置边框实现

2.画三角形

.bd {
    width: 0;
    height: 0;
}
.bd {
    border-top: 50px solid orange;
    border-right: 50px solid cyan;
    border-bottom: 50px solid yellow;
    border-left: 50px solid blue;
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网