文档章节

前端的那些事之css篇

上官清偌
 上官清偌
发布于 2016/12/07 21:30
字数 962
阅读 3
收藏 0
点赞 0
评论 0

css部分

元素的显示方式:

  • 1、块级元素:
    • display(显示方式):block;
    • 特点:独占一行; 可以设置宽高; 默认宽度一整行
    • 所属标签:div,p,h1,ul,li,ol,dl
  • 2、行内元素:
    • 特点:可以多个标签放在同一行,无法设置宽高;大小有内容决定。
    • display(显示方式):inline;
    • 所属标签:span,b,u,i,s,ins,del,strong,em
  • 3、行内块级元素:
    • 特点:可以多个标签放在同一行,并且可以标签设置宽高。
    • display(显示方式):inline-block;
    • 所属元素:a,img

Css的三大特性

  • 继承性
  • 什么样的属性才可以继承呢?:凡是以line-,text-,font- 开头的属性都可以继承。
  • 注意:a标签不继承color,text-decoration:none
  • h系列,不继承font-weight
  • 优先级:!important>Id>类>标签>通配符>继承>浏览器默认
  • 注意:!Important属性是不能继承的

基础样式

- 前景
    - color/*文字颜色*/
    - font-size/*文字尺寸*/
    - font-weight/*文字重量normal bold bolder lights*/
    - font-family/*文字字体*/
    - font-style/*文字样式*/
- 背景
    - background-color/*背景颜色*/
    - background-image/*背景图片*/
    - background-repeat/*背景图片平铺的方式默认repeat|no-repeat|repeat-x|repeat-y*/
    - background-position/*背景图片从什么地方开始绘制xy轴像素、相对于画布的百分比,常量*/
    - background-size/*背景图片尺寸(以当前画布的大小为参考点)*/
  • 显示方式
    • height/高度/
    • width/宽度/
    • text-align/文本水平对齐方式,left|center|right/
    • line-height/文本垂直对齐方式,单行文本把它设置为height一样的值/
    • cursor/光标样式pointer|ew-resize/;
    • display/显示的方式block|inline|inline-block|none/
  • 盒子模型
    • content:width和height设置
    • padding:内边距
    • border:边框
    • margin:外边距
    • 盒子的大小不是取决于width和height这两个属性,这两个属性只是设置盒子内容的宽高
    • 盒子的总大小取决于内容的宽高+内边距(padding)+边框(border)

定位

- static 静态的 default :static默认值,盒子不能移动
    - relative 相对的
    - relative相对定位是相对于static的时候的定点来移动
    - 通过top和left属性来设置
- position:absolute//绝对定位
   -  1.0如果这个元素没有父元素,那么将来trbl是相对于body来定位的
   -  2.0如果绝对定位的元素有父元素,但是父元素没有定位,那么这个时候trbl还是相对于body来定位。
   -  3.0如果绝对定位的元素有父元素,而且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础。
    -  4.0绝对定位之后的元素在页面不会占据位置(绝对定位以后的元素会脱离标准流)。
    - 子元素使用绝对定位,父元素使用相对定位。
  • fixed:固定:position:fixed。 - 特点:1.不管页面有多大,trbl永远是相对于浏览器的边框来的。 - 2 固定定位的元素也脱离了标准流(不在页面上占据位置)
  • 漂浮着的position盒子都能够使用top、left、bottom、right
  • z-index可以设置漂浮的position盒子的层级,默认值是0,值越大越在上面
  • :hover 悬停伪类 当鼠标悬停在上面的时候就触发
  • text-indent属性设置文本首行缩进
  • list-style属性用来设置列表的前缀(none就没有了)
  • 溢出:
    • overflow 当盒子里面的内容溢出当前盒子的时候,如何显示
    • visible|scroll|auto|hidden
    • visible,当内容溢出的时候,显示溢出的内容
    • hidden,当内容溢出的时候,隐藏溢出的内容
  • white-space: nowrap;/里面的文本内容不换行/
  • vertical-align: middle;/设置右边低盒子相对于旁边高盒子的水平对齐方式/
  • opacity:0;/盒子的透明度/

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 85
码字总数 118519
作品 0
浦东
程序员
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

2017/12/25
0
0
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0
SegmentFault 2017 年社区周报 Vol.1

Hello,各位 SegmentFault 的 GG 和 MM,SegmentFault 新人 Jenny 来报道啦!本喵资料:性别女,爱好你猜,皂片请点击头像~ 新人一周见闻:分享了技术头条,学习了技术问题,放行了一丢丢内容...

Jenny
2017/04/21
0
0
Webpack4+ 多入口程序构建

欢迎关注富途web开发团队,缺人从众 其实,说实话这篇文章的由来也是有很多的原因在里面的。在这之前,我也做过不少的项目。有新的项目,也有旧的项目。通过对旧项目的不断研究,改进。再结合...

富途web开发团队
05/10
0
0
AI 时代,爱学习的程序员都关注了这些…

这篇文章推荐了包括技术、设计、极客相关的热门公众号。

p5deyt322jacs
01/07
0
0
FED之必备技能

flex.css快速入门,极速布局 什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚...

掘金官方
2017/12/08
0
0
web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客
2017/04/14
0
0
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
01/04
0
0
ELSE 技术周刊(2018.01.01期)

业界动态 小程序又搞事情,H5 开发的春天来了! 就在刚刚,微信官方公布了几个小程序爆炸性的新闻,在 2017 年的年底,这个新闻似乎是在告诉大家,小程序能做的事越来越多,2018 年你再也没法...

01/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部