美文网首页
css常见样式

css常见样式

作者: leocz | 来源:发表于2017-05-22 17:22 被阅读0次

1. 块级元素和行内元素

常见的块级元素
div,h1~h6,p,ul,ol,li,dt,dd,form,hr还有html5中新增的header,footer,section,article等
常见的行内元素
span,img,a,input,label(增大控件的触发范围),selcet,button,textarea,em,strong等

块级元素的特性:

  1. 块级元素都是独占一行
  2. 块级元素可以设置宽高
  3. 块级元素可设置边距
  4. 块级元素可包含块级元素、行内元素和文本

行内元素的特性:

  1. 行内元素并排排列,一行的宽度不够才会换行
  2. 行内元素不可设置宽高,
  3. 行内元素不可设置上下边距(padding和margin),左右边距可以
  4. 行内元素只能包含行内元素和文本

2. css继承,可以继承的属性和不能继承的属性

css继承是指不给元素设置样式,元素与父元素保持一致的样式,我们称这些样式属性发生了继承。

可继承的属性:

  • 字体属性
    font、font-family 规定元素的字体系列、
    font-weight、font-size、font-style 定义字体的风格
  • 文本系列属性
    text-indent 文本缩进
    text-align 文本水平对齐
    line-height 行高
    word-spacing、letter-spacing 文本间隔
    text-transform文本大小写
    direction 文本的书写方向
    color 文本颜色
  • 列表相关的属性:
    list-style-image, list-style-position,list-style-type, list-style

不可继承的属性:

display,margin,border,padding,background,width,height,min-height
max-height,min-width,max-width,overflow,position,left,right,top,bottom
z-index,float,clear,table-layout,vertical-align等

3.块级元素和行内元素的居中

块级元素居中可对其设置margin:0 auto 即可居中
行内元素居中可对其父元素设置text-algin:center 即可居中

4.单行文本溢出用...代替

单行文本用y溢出用...代替的 代码如下:

p{
      width:100px;
      white-space:nowrap;   /*规定段落中的文本不进行换行*/
      overflow:hidden;
      text-overflow:ellipsis;  
}

5.px em rem的区别

  • px是固定单位,像素单位,1px即一像素;用px设置字体大小,比较精确;
  • em是相对单位,相对于父元素所设置的字体大小,1em即父元素字体大小的1倍;
  • rem也是一个相对单位,与em不同的是rem是基于根元素的,html中即html

6.实例

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

上面一段代码详细写法是

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

加引号是因为字体中出现了空格,如果不加引号,则会被误认为是多个字体,\5b8b\4f53 是字体的unicode编码,表示宋体,对于中文字体,使用字体编码这种方式设置能更有效的让浏览器解析到正确的字体。

相关文章

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • 【CSS】 Index

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局

  • CSS的常见样式

    本篇文章将主要阐述CSS的常见样式 对于常见样式做出大量说明 虽然CSS的样式并不算多但是在CSS的使用上却是最多...

  • 【CSS】三、常见属性

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局## 三、...

  • 【CSS】 一、使用CSS样式的方式

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局## 一、...

  • 【CSS】 二、定义样式表

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局## 二、...

  • 【CSS】四、DIV+CSS布局

    CSS 一、使用CSS样式的方式CSS 二、定义样式表CSS 三、常见属性CSS 四、DIV+CSS布局## 四、...

  • 从零开始学CSS - 样式

    样式 CSS 背景属性 CSS 文本属性 CSS 字体属性 链接 常见的链接样式,text-decorat...

  • #4 react-css-modules

    CSS Modules 在React中写样式有多种方式,比较常见的有 CSS modules,这种方法将css样式...

  • CSS常见样式

    块级元素有:div,h1,h2,h6,p,hr,form,ul,dl,ol,pre,table,li,dd,dt,...

网友评论

      本文标题:css常见样式

      本文链接:https://www.haomeiwen.com/subject/ienbxxtx.html