css基本样式1（7.1）

meteor199 发布于2019-08-30 15:47 / 1918人阅读

摘要：显示为块状元素。显示为行内元素显示为行内块，创建一个字体大小的最小字体是，文字粗度默认粗体字体行高文本属性用于设置文字对齐方式。

块级元素(block-level)和行内元素(inline-level)

(1)差异：

块级元素能包含行内元素和块级元素，行内元素只能包含行内元素和文本内容

块级元素可以占据一整行，行内元素只能占据内容的宽度

块级元素可以设置宽高margin，padding，行内元素不能设置宽高，设置上下margin和padding不生效，左右的margin和padding生效。(在设置背景颜色，border显示的情况下，padding和margin视觉上会被撑开，但实际的占用位置是不变的)

(2)常用的块级元素

div h1 h2 h3 h4 h5 h6 p form pre 
table tr th td ol li ul dl dd dt

(3)常用的行内元素

em strong span img a  button label
select input textarea  code

2.盒模型
盒模型内容的width、height、padding内边距、border、margin外边距。

3.宽高width/height
对行内元素不生效，只对块级元素生效

.box{
background-color:red;
width:100px;
height:20px;
}

4.边框 border
（1）border主要参数：
1、width 2、样式（样式有直线solid、圆点dotted、短直线dashed） 3、颜色

//例子1
.list {
  border: 1px solid #ffffd;
}

//例子2利用border画三角形
.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom:100px solid transparent;// transparent让边框透明
}

demo：链接描述
（2）边框倒圆角border-radius

.control {
width:100px;
height:100px;
  border-radius: 4px 10px 8px 5px;
//分别代表的左上、右上、右下、左下的倒圆角直径
//可以用百分比做radius的参数
// border-radius：50%或者倒圆角直径大于半径，就可以得到圆
}

5.内边距padding

padding：10px 20px 30px 5px；
//分别代表的左上、右上、右下、左下的内边距宽度
//可以简写成上下10px，左右20px；
padding：10px 20px；

6.外边距margin
（1）基本用法

margin：10px 20px 30px 5px；
//分别代表的左上、右上、右下、左下的外边距宽度

（2）外边距合并

（3）块级元素的自动居中

margin：0 auto；//相当于左右外边距距离相等，就居中了

7.去除浏览器默认的样式

*{
margin：0；
padding:0;
}

8.display 指定用于元素的呈现框的类型
块级：block list -item table
行内：inline inline-block inline-table

none 不显示元素。

block 显示为块状元素。

inline 显示为行内元素

inline-block 显示为行内块，创建一个 BFC

9.font
font-size:30px 字体大小
chrome 的最小字体是16px，
font-weight:文字粗度（regular默认 bold粗体）
font-family:字体
line-height:行高

p {
  font:12px/1.5 "Source Han Sans", Helvetica, Arial, sans-serif;
}

10.文本
（1）text-align
text-align 属性用于设置文字对齐方式。

left 左对齐

right 右对齐

center 居中，当设置在图片的父元素上时，可以使图片居中

justify 两端对齐

（2）text-indent 首行缩进距离

p { 
  text-indent: 2em;  /* 文章的每一段空两格开头 */
}

（3）text-docoration 用于设置文字划线样式

text-docoration:none 取消划线

text-docoration:underline 下划线

text-docoration:overline 上划线

text-docoration:line-through 中划线

(4)text-transform 属性用于改变字母的大小写。

text-transform:none 取消转换效果

text-transform:uppercase 转为大写

text-transform:lowercase 转为小写

text-transform:capitalize 转为首字母大写

(5)letter-spacing
letter-spacing 属性用于设置文字/字母的间距。

(6)word-spacing
属性用于设置单词/字的间距

11.文本超出省略
demo：链接描述

.card >h3{
  white-space:nowrap;//空白字符：文本不折行
  overflow:hidden;  //超出部分隐藏
  text-overflow:ellipsis;//文本超出的地方，添加省略号
  
}

12.颜色color
单词：red blue black pink
16进制：#fff #000 #0f0 #eee #333 #666 #f034ec
所有颜色都可以由红绿蓝三种颜色混合而成，就把每个基色分成255份，按照16进制来展示。两个相同的字母是可以省略的，故#fffffff可以写成#fff。
rgb(255,255,255)分别代表是red green blue
rgba(255,255,255,0.5)分别代表是red green blue 透明度（0为透明，1不透明）

#000为黑色
#fff为白色
其他3个字母相同基本是灰色，不同深浅的灰色

13.单位
px:固定单位，像素点之意
em：相对单位，相对于父元素大小
rem：相对单位，相对于html根元素大小
vm：相对单位，1vm相对屏幕宽度的1%，但兼容性很差

14.a链接样式

（1）设置颜色

a链接的颜色是不能继承的，不能通过给父元素设置颜色，继承给a链接。
a链接的颜色只能通过选择a链接直接设置

a{
color:red;}

取消a链接下划线

a{ text-decoration:none;}

15.取消ul中li前面的.

li{ list-style:none;}

16.隐藏元素
opacity:0 整体透明度为0
visibility:hidden; 隐藏，但还占用位置
display:none; 消失，不占用位置
rgba(255,255,255,0) 只是背景色透明

云服务器服务器托管 Bootstrap基本样式 css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116392.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
SVG基础教程(超级详细)

摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。一、内置图形: rect(矩形) circle(圆) ellipse(椭圆) line(直线) polyline(折线) polygon(多边形) path(路径) 二、内置图形的html属性或(css样...

张宪坤 2019-08-21 17:42 评论0 收藏0
编写灵活、稳定、高质量的CSS代码的规范

摘要：过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。只有在必要的时候才将限制在最近的父元素内也就是后代选择器例如，不使用带前缀的时前缀类似于命名空间。制定一致的注释规范。一、语法 1.1 注意（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。（2）为选择器分组时，将单独的选择器单独放在一行。（3...

psychola 2019-08-30 14:16 评论0 收藏0
CSS学习笔记(三) CSS选择器

摘要：规则命名惯例规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成属性和值。用于选择作为指定祖先元素后代的标签。维基百科在其引证中大量使用了伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。 1.为文档添加样式的三种方法行内样式（写在特定 HTML 标签的 style 属性里）嵌入样式（嵌入的 CSS 样式是放在 HTML 文档的 hea...

charles_paul 2019-08-28 18:01 评论0 收藏0