标签的划分

  • 块级元素

    • 独占一行

    • 设置  可以起作用

    • 排列方式: 上下排列

  • 行内元素

    • 可以共占一行

    • 设置   不起作用,大小由内容决定

    • 排列方式:左右排列

  • 行内块

    • 可以共占一行

    • 可以设置 

    • 排列方式:左右

标签

  • 标题:h1-h6

  • 段落 p

  • 图片 img

  • 超链接 a

  • 格式化标签

    • 加粗 b strong

    • 斜体 i em

    • 下划线 ins u

    • 删除线 del s

  • 预格式化标签 pre

  • 音频 audio

  • 视频 video

  • 大盒子 div

  • 小盒子 span

  • 三大列表 ul li ol dl dt dd

块级元素

  • h1-h6 div p

  • 三大列表 ul li ol dl dt dd

  • 新增 table

行内元素

  • 加粗 b strong

  • 斜体 i em

  • 下划线 ins u

  • 删除线 del s

  • span

  • a

行内块

  • 视频 video audio

  • 图片 img

display的几个值

  • display:block;转化为块级元素

  • display:inline;转化为行内元素

  • display:inline-block;转化为行内块

  • display:none;让元素消失

面试题让元素消失的几种方法??

  • display:none;让元素消失

  • opacity:0;透明度 数值范围 0-1

  • visibility:hidden;可见性 :隐藏

  • 定位的元素,通过改变z-index(层级关系)

  • 通过margin负值,把元素调到屏幕的一侧;

让元素消失前三者 的关系

  • display:none;元素彻底消失

  • opacity:0;元素消失位置还在

  • visibility:hidden;元素消失位置还在

font-family 字体样式

  • 设置字体: 如果是中文或者应为字体由多个单词组成,需要加引号可以设置多种字体,有顺序关系

font-family: "宋体";
font-family: Georgia, 'Times New Roman', Times, serif;

font-weight 加粗

font-weight:700;
font-wightt:bold; //加粗
font0-wight:bolder; //更粗
font-weight:900;
font-weight:normal;//正常粗细 的相当于400

## 语义化 
合适的标签做合适的事:语义化

控制文字样式font-style

font-style:normal; //正常
font-style:italic; //倾斜

块级元素水平居中magin:0 auto;

块级元素,快速水平居中

盒子文字垂直居中

/* 文字垂直居中,让此元素的高度=行高 */
height: 200px;
line-height: 200px;

文字水平调节 text-align

text-align:left; //左对齐
text-align:center;//居中
text-align:right; //右对齐

边框border

/* 第一个值:边框粗细
第二个值:边框样式 solid实线 dashed虚线
第三个值:边框颜色
*/
border: 5px solid darkcyan;

前端小白的学习之路html与css的较量【二】的更多相关文章

  1. 前端小白的学习之路html与css的较量【一】

    html和css的较量 web结构的组成 html标签规则 快速生成一个html html的基本结构 标签的关系 标签 标题标签 段落 图片 超链接 a 属性 a标签里面的值 字符实体 新增的标签 1 ...

  2. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  3. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  4. 前端小白webpack学习(一)

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

  5. 小白的学习之路(hello wold!)

    Hello word ! 一直想写博客,但是都拖延了,正好两天有假期就开始弄这个事情了.开始觉得写博客也没有什么,一路学习以来都是看别人的博客进行学习,也收藏了不少博客,学到了不少东西,所以我觉的博客 ...

  6. Web前端 web的学习之路2

    2019 年 Web 开发技术指南和趋势 2019/01/23 · JavaScript · 趋势 转载:原文出处: 李棠辉(http://web.jobbole.com/95622/)    以下内 ...

  7. Web前端 web的学习之路

    零基础学习web前端的顺序 ( 转载自:https://blog.csdn.net/weixin_41780944/article/details/83751632) 怎么开始学习两条路:自学或者找培 ...

  8. 一个python小白的学习之路

    本人是个网管,在佛山工作,现在已经学习了一段时间python了,还是学开基础,但近段时间有一点的突破出来了,找到了一个很好的自学视频,等自己有能力了就想找一个特训班试试.已经看了视频两个星期了,有小小 ...

  9. 偏前端-vue.js学习之路初级(一)概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

随机推荐

  1. 简历求职:STAR法则

    做了近2年的大学生就业辅导工作,也接触了很多即将走出校园的大学生,做个总结与大家分享,同时也是对自己的一个总结. 最近刚听说STAR法则,这也是一直我们给学生的指导思想,百度了一下: STAR法则,即 ...

  2. Flutter学习简记

    StatefulWidget和StatelessWidget StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化. ...

  3. 有意思!强大的 SVG 滤镜

    想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼.让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼.题图为袁川老师使用 SVG 滤镜实现的云彩效 ...

  4. Java学习之随机数的用法

    •前言 随机数的产生在一些代码中很常用,也是我们必须要掌握的. 而 Java 中产生随机数的方法主要有三种: new Random() Math.random() currentTimeMillis( ...

  5. Android学习中出现的问题

    •问题1:多行文字如何实现跑马灯效果? 博客链接:Androidd Studio 之多行文字跑马灯特效 解决状态:已解决 •问题2:cause: unable to find valid certif ...

  6. Spring Boot MVC 单张图片和多张图片上传 和通用文件下载

    @Autowired private ServerConfig serverConfig; /** * 通用下载请求 * * @param fileName 文件名称 * @param delete ...

  7. 给我一个shell我能干翻你内网

    0x00 前言 在去年小菜鸡学了点内网知识就闲着没事跑点jboss的站看看,在经历过很多次内网横向失败之后终于算是人生圆满了一把,阿三的站一般进去之后很难横向,不知道是不是我太菜的原因,反正阿三的站能 ...

  8. java面试-集合类不安全问题及解决方案

    一.List 1.代码演示 public class ArrayListNotSafeDemo { public static void main(String[] args) { List<S ...

  9. 面试官问PHP四大主流框架的优缺点,看这篇就够了!

    本篇文章我们来讲讲PHP四大框架的优缺点都有哪些,让你们在开发中更好的去选择使用哪款PHP框架去完成项目,废话不多说,我们一起来看看吧!! ThinkPHP ThinkPHP(FCS)是一个轻量级的中 ...

  10. 无线网络的应用之aircrack-ng

    在kalilinux的aircracke-ng中.在这儿描述自己所遇到的问题并给予写blog 在使用之前,需要确定是否有对应的支持无线网卡监听的网卡,在虚拟机中需要先将网卡的驱动重定向到虚拟机内 在终 ...