css知识总结和补充(一)

元素的显示与隐藏

涉及元素的显示或者隐藏的属性主要有 display、visibility 和 overflow(元素的溢出部分的显示与隐藏)。

  1. display 属性用于建立布局时元素生成的显示框类型。对于 HTML 等文档类型,需要谨慎使用 display 属性。因为可能违反 HTML 中已经定义的显示层次结构。这里主要是讲该属性的另一个作用,可用于设置元素的显示和隐藏。display : none; 隐藏元素,display : block; 显示元素。在使用 display 属性隐藏元素之后,元素不再占据原来的空间
  2. visibility 这个属性用于指定是否显示一个元素生成的元素框。visibility : visible; 默认值,元素是可见的。visibility : hidden; 元素是不可见的。使用 visibility 属性隐藏元素之后,元素依旧会占据页面上的空间。这个属性可以用来实现遮罩层样式的设置。
  3. overflow 属性规定当内容溢出元素框时发生的事情。以下是设置不同属性值的描述。
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

scroll 值无论元素内容是否有溢出都会添加水平和垂直两个方向的滚动条。而 auto 则是在该方向上出现溢出时才添加相应的滚动条

单行文本溢出省略号显示样式设置

1、先强制一行内显示文本white-space:nowrap;
2、超出部分隐藏overflow:hidden;
3、文字使用省略号代替超出部分text-overflow:ellipsis;

<style>
	div{
		float: left;
		width: 100px;
		height: 40px;
		margin: 200px 100px;
		border: solid 2px;
	}
	div:first-child{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
style>
<body>
	<div>
		<span>我这里写了很多很多字,我要让它在一行内显示不下span>
	div>
	<div>
		<span>我这里写了很多很多字,我要让它在一行内显示不下span>
	div>
body>

没有设置第一个盒子的样式时:
css知识总结和补充(一)_第1张图片

强制一行显示后:
css知识总结和补充(一)_第2张图片

隐藏并替代:
css知识总结和补充(一)_第3张图片

多行文本溢出省略号显示样式

多行文本溢出省略号显示样式(有较大的兼容性问题,适用于webkit浏览器或移动端。不建议直接使用 css 来完成。)

  1. 弹性伸缩盒子模型显示display:-webkit-box;
  2. 设置或检索伸缩盒子对象的子元素的排列方式-webkit-box-orient:vertial;
  3. 限制在一个块级元素显示的文本行数-webkit-line-clamp:2;
  4. overflow:hidden; text-overflow:ellipsis;

div:first-child{
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

在 chrome 和 firefox 中的结果如图:
css知识总结和补充(一)_第4张图片

浏览器私有前缀

-moz-:代表firebox浏览器的私有属性
-ms-:代表ie浏览器的私有属性
-webkit-:代表safari,chrome的私有属性
-o-:代表Opera浏览器的私有属性

至此已经总结的知识

  1. Html常用标签和属性(包含Html5)
  2. css中的选择器及其权重
  3. css中的样式总结
  4. 盒子模型和元素的显示模式
  5. css浮动(float)、高度塌陷问题
  6. css中的定位的使用
  7. 盒子阴影、字体图标、精灵图、圆角边框
  8. 2D转换和3D转换
  9. css中的过渡和动画
  10. vertical-align属性

总结:html 和 css 一些比较基础和常用的知识都复习和总结了一遍,感觉收获不少。

后续需要总结复习有关HTML和CSS的知识

HTML5

  • 拖放
  • 画布
  • SVG
  • 地理定位
  • Web 存储
  • 应用缓存

CSS3

  • 多列(感觉了解即可, 很多图片网站都喜欢使用瀑布流效果来做排版。可以使用多列来完成。)
  • canvas 画布
  • 多媒体查询
  • 布局总结

扬尘 / 2020 / 7 /14

你可能感兴趣的:(HTML+CSS,css,css3)