前端学习(22)~css问题讲解

你是如何理解 HTML 语义化的?

语义化:指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化)。

举例:段落用 p,边栏用 aside,主要内容用 main 标签。

好处:

便于开发者阅读和维护

有利于SEO:让浏览器的爬虫和辅助技术更好的解析,

语义化标签介绍:

在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div本身是没有语义的。但是现在,HTML5中加入了一些语义化标签,来更清晰的表达文档结构

meta viewport 是做什么用的,怎么写?

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

控制页面在移动端不要缩小显示。

css reset 和 Normalize.css 有什么区别

二者都是用来统一浏览器的默认样式:

  • reset:重置。相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。(一刀切)
  • Normalize.css :标准化。相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。(去伪存真)

选择器的优先级如何确定

  • 选择器越具体,优先级越高。 #xxx 大于 .yyy
  • 同样优先级,写在后面的覆盖前面的。
  • color: red !important; 优先级最高。

BFC 是什么

overflow:hidden :取消父子 margin 合并。 (另一种推荐做法:padding-top: 0.1px;

如何清除浮动

(1)overflow: hidden

(2).clearfix 清除浮动写在爸爸身上

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

    /* 兼容 IE */
    .clearfix {
        zoom: 1;
    }

伪类和伪元素的区别是什么?

概念上的区别:

  • 伪类表示一种状态
  • 伪元素是真的有元素。比如 ::after 是真的有元素,可以在页面上显示内容。

使用上的区别:

  • 伪类:使用单冒号
  • 伪元素:使用双冒号

原文地址:https://www.cnblogs.com/Vincent-yuan/p/12375079.html

时间: 2024-11-09 03:21:22

前端学习(22)~css问题讲解的相关文章

前端学习之CSS(三)

九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: html内容: <div class="box1">第一个div</div> <div class="box2">第二个div</div> <span>一个span</span> css内容: *左浮动*

前端学习(13)~css学习(七):浮动

文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 标准文档流 标准文档流的特性 (1)空白折叠现象: 无论多少个空格.换行.tab,都会折叠为一个空格. (2)高矮不齐,底边对齐: (3)自动换行,一行写不满,换行写. 行内元素和块级元素 学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素 块级元素 我们可以举一个例子,看看块级

前端学习 -- Html&amp;Css -- 条件Hack 和属性Hack

条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keywords> if条件共包含6种选择方式:是否.大于.大于或等于.小于.小于或等于.非指定版本 是否: 指定是否IE或IE某个版本.关键字:空 大于: 选择大于指定版本的IE版本.关键字:gt(greater than) 大于或等于: 选择大于或等于指定版本的IE版本.关键字:gte(greater th

2016/12/10前端学习笔记CSS结束+JS开始。

18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理 css属性之前加上下划线是IE6的专有属性 例如:_background-color:red; 19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象.但是浮动后没有塌陷. 20

前端学习html css js

html 第一章 :HTML模板 HTML是什么(超文本标记语言) HTML网页主体结构 doctype标签 head标签 meat标签 title标签 body标签 第二章:HTML标题 h1标题标签 h2标题标签 h3标题标签 h4标题标签 h5标题标签 h6标题标签 hr水平线标签 第三章:HTML 段落 p段落标签 br换行标签 第四章:HTML 样式 center定义居中内容 font和basefont定义HTML字体 s和strike定义删除线文本 u定义下划线文本 第五章:HTML

前端学习(1)~html标签讲解(一)

本文主要内容 头标签 排版标签:<p>. <div>. <span>.<br> . <hr> . <center> . <pre> 字体标记:<h1>. <font>. <b>. <u> .<sup> .<sub> 超链接 <a> 图片标签 <img> 0.前言 web标准介绍: w3c:万维网联盟组织,用来制定web标准的机构

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

前端学习 -- Html&amp;Css -- 层级和透明度

层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. 对于没有开启定位的元素不能使用z-index. 透明度 设置元素的透明背景opacity可以用来设置元素背景的透明,它需要一个0-1之间的值: 0 表示完全透明 1 表示完全不透明 0.5 表示半透明 opacity属性在IE8及以下的浏览器中不支持,IE8及以下的浏览器需要使用如下属性代替:alp

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里