CSS学习(三)
CSS 分组 和 嵌套 选择器
分组选择器
h1,h2,p
{
color:green;
}
嵌套选择器
View Code
尺寸 (Dimension)
尺寸属性
属性
描述
height
设置元素的高度。
line-height
设置行高。
max-height
设...
文章
橘子红了呐
2017-11-08
743浏览量
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位。
现在搞清楚了,不是相对于父元素,也不是相对于BODY。
而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元...
文章
double2li
2012-03-30
702浏览量
python插入排序
插入排序(Insertion Sort)的基本思想是:将列表分为2部分,左边为排序好的部分,右边为未排序的部分,循环整个列表,每次将一个待排序的记录,按其关键字大小插入到前面已经排好序的子序列中的适当位置,直到全部记录插入完成为止。
插入排序非常类似于整扑克牌。
在开始摸牌时,左手是空...
文章
wsc449
2018-02-08
669浏览量
BFC 布局概念总结
BFC 块级格式化上下文
布局规则
内部的Box会在垂直方向,一个接一个的放置。
Box垂直距离有margin决定,属于同一个BFC的两个相邻Box的margin垂直方向上回发生重叠。
每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反...
文章
烟海之蓝
2019-09-23
396浏览量
@寒冬winter 大神的css作业问题
块级元素 ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度。 ④它可以容纳内联元素和其他块元素 行内级元素 ①和其他元素都在一行上; ②高,行高及外边距和内边距不可改变; ③宽度就...
文章
互联网fans
2014-06-15
811浏览量
CSS水平和垂直居中技巧大梳理
水平居中
行内元素的水平居中
text-align:center(在父元素中设置)
只对内联元素或行内块元素有效
需要放置于父元素中
块级元素的水平居中
margin: 0 auto;
只对块级元素有效
auto指的是自适应宽度。实质就是均分了元素左右的剩余空间,所以元素会居中。
auto...
文章
动力节点
2019-01-16
6081浏览量
轻谈BFC
BFC 定义
CSS2.1的定义 Block formatting contexts
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-b...
文章
淡色的云
2017-12-22
851浏览量
前端基础学习css
一、伪类
anchor用于控制链接效果
a:link (没有访问过的链接),定义链接的常规状态
a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用)
a:visited(访问过的链接) ,能清楚判断访问过的链接
a:active(在鼠标按下时的状态)
例子:
Title.{
...
文章
技术小胖子
2017-11-08
819浏览量
z-index堆叠规则
一、z-index
z-index用来控制元素重叠时堆叠顺序。
适用于:已经定位的元素(即position:relative/absolute/fixed)。
一般理解就是数值越高越靠上,好像很简单,但是当z-index应用于复杂的HTML元素层次结构,其行为可能很难理解甚至不可预测。因为z-in...
文章
ghost丶桃子
2016-05-20
1481浏览量
Java冒泡,选择,插入排序算法
冒泡排序
基本思想:在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒。
即:每当两相邻的数比较后发现它们的排序与排序要求相反时,就将它们互换。
第一次比较排序的结果:会把其中最大的数据排到最大的索引处
第二次比较排...
文章
笔记侠
2017-03-06
1221浏览量
父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
html代码:
<div class="box1">
<div class="box2"></d...
文章
木头先生
2016-05-05
510浏览量
我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局。本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框、静态位置等等。后来看了大神的一片面试文章,嗯?这里怎么还有个BFC,这是神马东东。待我搜索一下,萨萨萨,不看不知道,越看越糊涂,这到底是个神马东东。。。经过一个周...
文章
木的树
2016-04-21
1529浏览量
CSS使用经验总结
清除图片下方出现几像素的空白间隙
方法1:
img{display:block;}
方法2:
img{vertical-align:top;}
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的
文章
夕阳白雪
2014-09-12
745浏览量
恶补web之二:css知识(3)
css有3种定位机制:普通流,浮动和绝对定位.
除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定.
通过使用position属性,可以选择4种不同类型的定位:
static 元素框正常生成
relative 元素框偏移某个距离...
文章
大熊猫侯佩
2015-01-06
1010浏览量
css浮动
一、浮动介绍
历史:
浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”。
定位方式:
浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。
Note:
...
文章
ghost丶桃子
2016-05-20
1523浏览量
HTML/CSS部分常见面试题
好程序员web前端教程分享HTML/CSS部分常见面试题。准备参加web前端面试的小伙伴们一起看一看吧,希望对大家有所帮助!
1、什么是盒子模型?
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),...
文章
好程序员
2019-10-24
922浏览量
CSS 潜藏着的BFC
在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期。
而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处。
什么是BFC(Block Formatting Context)
写CSS样式时,对一个元素设置css,我...
文章
哈你真皮
2017-12-19
518浏览量
CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
前几天遇到一个页面需求是这样的:
一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。
需求:
没有文字,没有聚焦——点赞
没有文字,聚焦——灰色发送
有文字——红色发送
如果用JS实现,需要监听输入框的change和focus事件,...
文章
行者武松
2017-08-01
1359浏览量
《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了。然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司,事情不算多,于是拿起《CSS权威指南》进行"基础复习"+"查漏补缺",本篇文章主要是总结了些自己认为CSS中值的注意...
文章
野兽''
2016-04-18
643浏览量
CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼
1 浮动带来布局的便利,却也带来了新问题
1 <!doctype html>
2 <html lang="en">
3 <head>
4 ...
文章
橘子红了呐
2017-11-15
680浏览量
浅析css中的BFC、IFC、GFC和FFC
很多前端工程师面试时经常被要求解释CSS中有关FC的概念问题。今天,老k就为大家浅析一下。
FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
...
文章
小丑丁丁
2017-07-18
6464浏览量
w3c系列之CSS(四):深入理解盒模型
盒模型是一个老生常谈的话题,本身并不复杂,它描述了文档树所产生的矩形框以及根据可视化格式模型(visual
formatting model)所产生的布局结构。
曾经看到一道面试题:说说CSS中的盒模型?网上的回答都是margin,border,padding,width,height之类的,尼...
文章
动感小前端
2014-08-28
1455浏览量
JavaScript ~ 排序算法(选择排序)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="te...
文章
swyan
2019-10-01
858浏览量
纸上谈兵: 图 (graph)
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!
图(graph)是一种比较松散的数据结构。它有一些节点(vertice),在某些节点之间,由边(edge)相连。节点的概念在树中也出现过,我们通常在节点中储存数据。边表示两个节...
文章
vamei
2013-08-01
850浏览量
教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。
而今天所要分享的,是使用 0 行JS代码来实现Tab切换!
具体效果如下:
Tab切换
方法一:模拟单选框原理
关于模拟单选框,在我之前文章中有讲到,详情请戳→纯CSS模拟单选框和复选框
...
文章
前端王睿
2018-05-30
768浏览量
BFC原理剖析
本文讲了BFC的概念是什么; BFC的约束规则;咋样才能触发生成新的BFC;BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准); 清除内部浮动;自适应两(多)栏布局。
1. BFC是什么?
Block fomatting context = block-level box + For...
文章
木头先生
2018-06-20
1371浏览量
聊聊CSS中的BFC
一、什么是BFC
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting cont...
文章
我是小助手
2018-07-12
984浏览量
为什么每个前端开发者都要理解页面的渲染?
今天我要将关注点放到页面渲染以及其重要性上。虽然已经有很多文章提到过这个主题了,但大部分信息都是零碎的片段。为了思考这件事情,我需要研究很多信息的来源。这也就是为什么我觉得我应该写这篇文章的原因。我相信这篇文章对新手会很有用,并且对想刷新和巩固他们已经了解的东西的高手也同样适用。
渲染应该从最开始...
文章
青衫无名
2017-06-02
1154浏览量
前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 ...
文章
秋天风景
2014-04-23
756浏览量
margin重叠
margin折叠的产生有几个条件:
这些margin都处于普通流中,并在同一个BFC中;
这些margin没有被非空内容、padding、border 或 clear 分隔开;
这些margin在垂直方向上是毗邻的,包括以下几种情况:
1、一个box的top margin与第一个子bo...
文章
技术小甜
2017-11-16
511浏览量