JackWong992 / article

慢慢来,其实会很快
http://www.feelone.top/article/
2 stars 0 forks source link

The way to the font end:CSS基础 #10

Open JackWong992 opened 6 years ago

JackWong992 commented 6 years ago

CSS全称:Cascading Style Sheets,层叠样式表 HTML注释: CSS注释:/xxx/ JS注释://


CSS的展现方式:内联样式,内部样式,外部样式 @import:url("abc.css")/"xxx.css" 用于从其他样式表引入样式规则,这些规则必须优先于其他类型的规则。


文件路径:

相对路径:

(1) css/a.css ./css/a.css
这两种的写法是一样的,只不过后面的写法更加规范一些。表示index.html和CSS文件夹是同级目录 (2)b.css 这种写法表示a.css和b.css在同级目录下 (3)../img/a.png 在a.css中要插入图片a.png,首先找到css/a.css,发现css和img同级所以需要在往上一级找,接着就是../img/a.png

绝对路径:

/user/bin/src/config 本地文件的绝对地址,相当于一个写死的地址。 网站路径: http://cdn.swiper.js / http://bootstrap.css 一般我们写入网站的相对路径


书写规范:


块级元素和行内元素


文本

chrome: 设置的最小字体是12px,默认字体是16px 解决最小字体的方法:css中的语法: -webkit-text-transform: scale(0.75) // 原来字体的0.75倍 文本的对齐方式: text-align: left/right/center/justify(两边对齐) 首行缩进:text-indent: 首行缩进的距离 文字样式:text-decoration: none/underline/line-through/overline 改变文字大小:text-transform: none/uppercase(全部大写)/lowercase/capitalize(首字母大写) 改变字(单词)之间的间隔:word-spacing: 字母间隔修改的是字符和字母之间的间隔:letter-spancing: 单行文本溢出用...省略号表示:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

字体大小

单位:px,em,rem,vw,vh区别? px是指一个具体的大小长度单位 em是一个相对单位,是相对于父元素的字体大小 rem是一个相对的单位,是相对于根元素的字体大小 vw,vh是一个相对的单位,是相对于视口的大小


隐藏or透明

JackWong992 commented 6 years ago

几个小练习:


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

block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th inline-level: em strong span a br img button input label select textarea code script 区别: 给块级元素设置宽高有效,给行内元素设置宽高无效 块级元素可以容纳行内元素和其他元素,但是行内元素只能容纳行内元素 块级元素独自占据一整行的空间,而行内元素只占据自身的宽度空间 块级元素的高度,行高以及外边距和内边距都可控制;行内元素的高,行高及外边距和内边距部分可改变 行内元素设置margin,padding只有左右有效,上下无效


什么是 CSS 继承? 哪些属性能继承,哪些不能?

CSS继承:父元素设置了某种样式的属性,子元素也显示这种属性。 可以继承的属性:color , font: size/wight/family/line-height 不可继承的属性:border,margin,padding,display


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

行内元素水平居中: text-align: center; 块级元素水平居中: margin-left: auto; margin-right: auto;


用 CSS 实现一个三角形

.triangle{ width:0px; height:0px; border: 40px solid black; border-color: transparent transparent green; } 预览地址:http://js.jirengu.com/jopasusona/1/edit?html,css,output


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

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /需要注意的上面的代码如果直接对行内元素使用是没有效果的/ 预览地址:http://js.jirengu.com/jopasusona/1/edit?html,css,output


px, em, rem 有什么区别

px是指一个具体的固定的单位 em是一个相对的单位是相对于父元素字体的大小 rem 是一个相对的单位,是相对于根元素的大小


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

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; } font: size/line-height style 字体大小是12像素,行高是字体像素大小的1.5倍,默认使用字体的样式为tahoma 后面用逗号隔开表示为备用字体。'\5b8b\4f53'表示为宋体,这是Unicode编码格式 如果电脑中没有tahoma就使用arial字体,如果没有arial字体就使用'Hiragino Sans GB'字体,如果没有就使用宋体,最后使用sans-serif字体


代码练习:

http://js.jirengu.com/jenukobiqe/1/edit?html,css,output http://js.jirengu.com/vonahuzozu/1/edit?css,output http://js.jirengu.com/relojuhigi/3/edit http://js.jirengu.com/nezamatubo/1/edit?html,css,output http://js.jirengu.com/qakabehiwe/1/edit?html,css,output

JackWong992 commented 6 years ago

背景

background: 简写属性,作用是将背景属性设置在一个声明中 background-attachment: 背景图片是否固定/随着页面的其余部分滚动 background-color: 背景颜色 background-image: 设置图像为背景 background-position:设置图像的起始位置 background-repeat:设置图像是否重复 background-size:设置背景的大小/contain:图片包含在其中/cover:图片等比例缩放


CSS Sprite雪碧图/精灵图


inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

我们知道inline元素是以行内元素显示,block是指以块级元素显示。 inline的元素好处宽度是有自己的内容决定,但是不能设置宽高,内外边距 block的元素好处是可以设置宽高,内外边距,内容是从上倒下的。 给元素设置为inline-block属性是将元素同时具备这两种属性。 解决缝隙:

  1. 相邻的元素之间不要有空格
  2. 父级元素设置:font-size: 0; 子元素正常设置font-size 解决对齐: 默认情况下是以文字的基线对齐的,通过设置vertical-align: bottom/top来实现顶端或者低端的对齐
JackWong992 commented 6 years ago

icon的实现方式:

  1. 最朴素的一种方式:直接图片引入,然后设置图片的宽度或者高度,然后通过设置vertical设置对齐方式
  2. 精灵图:通过background-position:进行调节图片的位置
  3. icon-font (1)制作字体文件 (2)声明font-family 1>使用本地链接 2>使用cdn (3)使用font-family:1>使用HTML实体 2>使用CSS:before
  4. svg
JackWong992 commented 6 years ago

浮动

清除浮动的代码:

.clearfix:before{
    content:'';
    display:block;
    clear:both;
}
JackWong992 commented 6 years ago

浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?

  1. 浮动的元素脱离了文档流
  2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
  3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐 影响: 父容器:无法撑开父元素,导致父元素坍塌 其他浮动元素:在同一个方向上,如果一个元素发生了浮动,那么同方向上其他浮动元素会紧随其后面。不同方向上,不会发生影响;但是孔家不够的情况下会被挤下去。 普通元素:如果为块级元素,则会忽略浮动占据它的位置,元素会处在浮动元素的下层。如果为内联元素,则会环绕浮动元素排列 文字:文字是不受浮动元素影响的,文字会围绕浮动的元素排列

    清除浮动指什么? 如何清除浮动? 两种以上方法

    浮动会让元素脱离文档流,浮动不再占据文档流的位置,也使浮动元素周围的元素表现的如同浮动元素不存在一样,给布局带来了一些副作用,清除浮动就是解决浮动的坍塌行为。 (1)

    .clearfix:after{
    content: '';
    display: block;
    clear: both;
    }

    (2) 在结尾处加一个空的div

    .clearfix{clear:both}