css基础(三)

1. 行内元素与块级元素

常见块级元素

div h1 h2 h3 h4 h5 h6 hr p ul li address form ul ol dl hr menu table fieldset

常见行内元素

a span img em strong br img input label select textarea cite

行内元素与块级元素的特性

  • 块级元素会充满整个父元素,可以设置宽度、高度,会计元素可以设置marging和padding。每个块级元素独占一行。
  • 行内元素可以设置左右的maging。可以使用padding撑开行内元素的高度和宽度,但是不能影响父元素的高度和宽度。
  • inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。。

2. CSS继承——哪些属性可以继承,哪些不能

css继承:父元素设置样式后,子元素的样式与父元素样式相同。
可继承元素:列表相关(list),文字相关(font),文本相关(text)

不可继承元素:display,width,padding,marging,height

3. 实现居中

块级元素居中:
设置宽度后,marging-left:auto;marging-right:auto;

行内元素居中:
使用代码:text-align:center

4. CSS实现三角形

将内容区width: 0;height: 0;,再在元素的一条边上加上较粗的边框,即可显示如一个三角形的样子。

5. 单行文本溢出变为……

white-space: nowrap; 文本空间:不折叠
overflow:hidden; 超出部分:隐藏
text-overflow:ellipses; 文本超出:省略号

6. px em rem

px:像素,固定宽度,
em:相对单位,相对于父元素或自身设定的字体大小
rem: 相对于HTML(body)的字体大小

** 问题:**解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

两个单词表示一种字体时,使用引号包裹表示这两个单词一起解读。
'\5b8b\4f53'表示宋体,在国外查看该网站时,浏览器也许不能解读'宋体'中文字体。使用'\5b8b\4f53'能让浏览器正确解析。

** 效果实现 **
—1—
—2—
—3—
—4—
—5—

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,263评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 2,101评论 0 6
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div h1 h2 h3 h4 h5 h...
    DCbryant阅读 307评论 0 0
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,242评论 1 4
  • 遥控阅读 202评论 0 0

友情链接更多精彩内容