CSS常见样式1

1、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

  • 块级元素举例：

div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
table – 表格
ul – 无序列表
……

  • 行内元素举例：

a – 锚点
big – 大字体
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
u – 下划线
……

  • 二者的区别：

一般行内元素只能包含数据和其他行内元素，块级元素可以包含行内元素和自身／其他块级元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <ul>
      <li><a href="">hello</a></li>
      <li><a href="">hello</a></li>
    </ul>
    <span>
        <strong>
            hello
        </strong>
        world
      </span>
  </div>
</body>
</html>

默认情况下块级元素占用一整行，而行内元素占据自身宽度空间。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      background:red;
    }
    span {
      background:blue;
    }
  </style>
</head>
<body>
  <div>
    hello
  </div>
  <span>
    hello
  </span>
</body>
</html>
测试01.png

宽高只对块级元素设置生效，对行内元素无效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      background:red;
      width: 100px;
      height: 50px;
    }
    span {
      background:blue;
      width: 100px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div>
    hello
  </div>
  <span>
    hello
  </span>
</body>
</html>
测试02.png

块级元素可设置padding和margin，行内元素只能设置padding及左右margin，且设置padding时左右padding推开距离，上下padding会延伸出去，但不会增加上下两行间的距离。

  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      background:red;
      width: 100px;
      height: 50px;
      margin: 10px;
      padding: 20px;
    }
    span {
      background:blue;
      width: 100px;
      height: 50px;
      margin: 20px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div>
    hello
  </div>
  <div>
    hello
  </div>
  <span>
    hello
  </span>
  <span>
    hello
  </span>
  <div>
    hello
  </div>
</body>
</html>
测试03.png

2、什么是 CSS 继承? 哪些属性能继承，哪些不能？

  • 每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
  • 当元素的一个 继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值 initial value（这里的意思应该是在该属性本身的定义中的默认值）。
  • 当元素的一个 非继承属性 ( reset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。
  • inherit 关键字 用于显式地指定继承性，可用于继承性/非继承性属性。

能继承的属性

字体相关属性：font,font-family,font-weight,font-size,font-style,font-stretch,font-size-adjust
文本相关属性：text-indent(文本缩进),text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color
元素可见性:visibility
表格布局属性：caption-side,border-collapse,border-spacing,empty-cells,table-layout
列表布局属性：list-style-type,list-style-image,list-style-position,list-style
生成内容属性：quotes
光标属性:cursor
页面样式属性：page,page-break-inside,window,orphans
声音样式属性：speak,speak-punctuation….

不能继承的属性

display
文本属性：vertical-align,text-shadow,text-decoration,white-space,unicode-bidi
盒子模型相关属性：width,height,margin相关属性,border相关属性,padding相关属性
背景相关属性：background,background-XXX
定位属性：float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index
生成内容属性：content,counter-reset,counter-increment
轮廓样式属性：outline-style,outline=width,outline-color,outline
页面样式属性：size,page-break-before,page-break-after
声音样式属性：pause-before,pause-after,pause,cue-before,cue-after,cue,play-during

3、如何让块级元素水平居中？如何让行内元素水平居中?

  • 常用方法：
    块级元素居中：对块级元素设置 margin:x auto; (上下margin随意）
    行内元素居中：对行内元素的父元素设置 text-align:center;
  • 方法总结：CSS水平居中与垂直居中的总结

4、用 CSS 实现一个三角形

  • 思路：块级元素的边框不仅可以分别设置大小、圆角，还可以分别设置颜色而出现四个三角形，隐藏部分三角形就可以得到单独的三角形。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    span {
      display:inline-block;
      border-top: 60px solid red;
      border-bottom: 60px solid red;
      border-left: 80px solid blue;
      border-right: 80px solid blue;
    }
  </style>
</head>
<body> 
    <span></span>
</body>
</html>
测试04.png

预览链接

5、单行文本溢出加 ...如何实现?

单行文本溢出的条件

  • 内容足够溢出：设置容器宽度或内容足够多；
  • 不换行：内容全部在一行；
  • 溢出后隐藏；
  • 设置隐藏的样式为“…”；
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      border: 1px solid #000;
      width:300px;   
      overflow: hidden;   
      text-overflow:ellipsis;   
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div>
    <span>
      单行文本溢出，单行文本溢出，单行文本溢出
    </span>
  </div>
</body>
</html>
测试05.png

6、px, em, rem 有什么区别

常用单位总结

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

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
  • 代码作用
    该段代码设置了body的font样式，字体大小为12px，行高是字体1.5倍的像素值，后面则是第一到第五字体，用逗号隔开，如果用户浏览第一字体没有，则查询第二字体有没有，以此类推，如果都没有则采用系统默认字体；
  • 字体为什么要加引号?
    因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码；
  • 字体里的数字符号代表什么?
    代表字体的Unicod码，获得该码的方式可以在网上查找，或者在开发者工具。

8、代码效果

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • CSS常见样式-1
    1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别 块级元素：div , p , form, ul...
    饥人谷_米弥轮阅读 3,003评论 0赞 2
  • CSS常见样式1
    1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别？ 常见的块级元素和行内元素 块级元素（bloc...
    饥人谷_邵征鹏阅读 2,839评论 0赞 0
  • CSS常见样式1
    块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别 块级元素有 html,body,h1~h6,p,d...
    cross_王阅读 2,241评论 0赞 1
  • 1-8.CSS常见样式1
    一、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别 参考文献1.MDN Block-level a...
    guidetheorient阅读 3,372评论 0赞 0

友情链接更多精彩内容