margin | 易学教程

BFC 神奇背后的原理

阅读更多关于 BFC 神奇背后的原理

转载http://blog.melonhuang.gitpress.org/~docs/css/1formattingContext.md BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC ，以及 BFC 的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec, 和许多文章，来全面地理解BFC： BFC 是个什么？哪些元素会生成 BFC BFC 的神奇的作用，及背后的原理一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box , Formatting context 的概念。 Box: CSS布局的基本单位 Box 是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和display属性，决定了这个 Box 的类型。不同类型的 Box ，会参与不同的 Formatting context (一个决定如何渲染文档的容器)，因此 Box 内的元素会以不同的方式渲染。让我们看看有哪些盒子： block-level box : display属性为block, list-item, table的元素，会生成 block-level box 。并且参与

【WPF学习】第八章 Grid面板

阅读更多关于【WPF学习】第八章 Grid面板

原文: 【WPF学习】第八章 Grid面板　　Gird面板是WPF中功能最强大的布局容器。很多实用其他布局控件能完成的功能，用Grid面板也能实现。Grid面板也是将窗口分割成更小区域的理想工具。实际上，由于Grid面板十分由于ong，因此在Visual Studio中为窗口添加新的XAML文档时，会自动添加Grid标签作为顶级容器，并嵌套在Window根元素中。　　Grid面板将元素分割到不可见的行列网格中。尽管可在一个单元格中放置多个元素，但在每个单元格中放置一个元素通常更合理。当然，在Grid单元格中的元素本身也可能是另一个容器，该容器组织它所包含的一组控件。　　需要两个步骤来创建基于Grid面板的布局。首先，选择希望使用的行和列的数量。然后，为每个包含的元素指定恰当的行和列，从而在合适的位置放置元素。　　Grid面板通过使用对象Grid.ColumnDefinitions和Grid.RowDefinitions集合来创建网格和行。例如，如果确定需要两行和三列，可添加以下标签： <Window x:Class="GridLayout.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com

css经典布局——头尾固定高度中间高度自适应布局

阅读更多关于 css经典布局——头尾固定高度中间高度自适应布局

转载：穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为“有钱人排行榜”！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！很久以前，百度的搜索结果更符合目标，因为他更了解中国人的习惯，这是不可争议，现在情况已经完全相反！虽然google经常是六脉神剑，但我更欣赏它的搜索结果。吐槽打住!!! 现在开始正式谈论这个经典布局 —— 头尾固定高度中间高度自适应布局下面说下要求： 1 头部固定高度，宽度100%自适应父容器； 2 底部固定高度，宽度100%自适应父容器； 3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 4 整个内容填满浏览器可视区域，并且不超出此区域！先看下效果图：相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！是的，本来就挺简单！方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染从我脑海崩出来的第一个念头就是定位布局—

HTML表单美化

阅读更多关于 HTML表单美化

由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】 body{ margin: 0; font: 16px/20px "宋体"; } .box{ width: 500px; height: 100px; line-height: 100px; margin: 0 auto; border: 1px solid black; text-align: center; } .box label{ position:relative; padding-left: 20px; } .box input{ visibility: hidden; } .box i{ position: absolute; top: -2px; left: -2px; height: 19px; width: 19px; background: url('https://demo.xiaohuochai.site/radiobutton.gif') no-repeat -14px -18px; } .box label:hover{ color: red; } .box label:hover i{ background-position: -14px -118px; }

寒假第八天——（家庭记账本）

阅读更多关于寒假第八天——（家庭记账本）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <style type="text/css"> *{margin: 0;padding: 0} html,body{height: 100%} /*这里很关键*/ .outer-wrap{ /*只有同时为html和body设置height: 100%时，这里的height才生效，并且随浏览器窗口变化始终保持和浏览器视窗等高*/ height: 100%; position: relative; background-image: url('images/01.jpg'); } .login-panel{ width: 400px; height: 200px; background-image: url('images/02.jpg'); position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; } </style> <body> <%

CSS书写规范

阅读更多关于 CSS书写规范

CSS书写规范开始就是形成良好的书写规范，是专业化的开始。空格规范【强制】选择器与 { 之间必须包含空格。示例： .selector { } div { } 【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。示例： font-size : 12px ; 选择器规范【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。示例： /* good */ .post, .page, .comment { line-height : 1.5 ; } /* bad */ .post, .page, .comment { line-height : 1.5 ; } 【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。示例： /* good */ #username input { } .comment .avatar { } /* bad */ .page .header .login #username input { } .comment div * { } 属性规范【强制】属性定义必须另起一行。示例： /* good */ .selector { margin : 0 ; padding : 0 ; } /* bad */ .selector { margin :

①CSS测试三基色融合测试是否能得到新颜色（白、黄、橙等）；②CSS赋值英文red、green、blue与三基色RGB对应测试

阅读更多关于 ①CSS测试三基色融合测试是否能得到新颜色（白、黄、橙等）；②CSS赋值英文red、green、blue与三基色RGB对应测试

一、测试能否实现三原色合出新色（方法是：透明度+堆叠） (很明显，行不通，难道我方法错了?) 二、测试赋值英文red、green、blue与三基色RGB是否对应代码：（不含兼容） <!DOCTYPE HTML> < html > < head > < meta charset = " utf-8 " /> < title > </ title > < style type = " text/css " > body { padding : 0 ; margin : 0 ; } .wrap { width : 200px ; height : 200px ; float : left ; margin : 100px ; } .box { width : 200px ; height : 200px ; font-size : 20px ; text-align : center ; line-height : 200px ; color : #fff ; } /*test1*/ .color-red { background : red ; opacity : 0.5 ; } .color-green { background : green ; opacity : 0.5 ; margin-top : -150px ; margin-left : 50px ; } .color

white-space属性

阅读更多关于 white-space属性

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>white-space</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .nomal{ 12 margin: 20px; 13 height: 200px; 14 width: 200px; 15 border: 1px solid red; 16 background-color:#3a9; 17 } 18 .nowrap{ 19 margin: 20px; 20 white-space: nowrap; 21 height: 200px; 22 width: 200px; 23 border: 1px solid red; 24 background-color:#3a9; 25 } 26 .nowrap-overflow-text-overflow{ 27 margin: 20px; 28 white-space: nowrap; 29 overflow: hidden; 30 text-overflow: ellipsis; 31 width: 200px; 32 border: 1px solid red; 33 background-color:#3a9; 34

百度

阅读更多关于百度

效果图 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link rel="stylesheet" href="css/nav.css" /> <link rel="stylesheet" href="css/center.css" /> <link rel="stylesheet" href="css/img.css" /> <link rel="stylesheet" href="css/bot.css" /> <link rel="stylesheet" href="img/font_1f632fq0apk/iconfont.css" /> <link rel="stylesheet" href="img/font_knm5rl5g2jk/iconfont.css" /> <link rel="icon" href="img/baidu.ico" type="image/x-icon" /> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#">新闻</a> </li> <li> <a href="#"

图解 CSS布局和定位

阅读更多关于图解 CSS布局和定位

1 . 布局与定位概述 2 . 盒子模型（I） 2 . 盒子模型（II） 3 . CSS定位机制概述 4 . 文档流定位 5 . 浮动定位 < style >  * { padding : 0 ; margin : 0 ; } body { font-size : 14px ; } #container { margin : 0 auto ; width : 400px ; height : 200px ; /*background-color: #6cf;*/ } #header { height : 40px ; background-color : #6cf ; margin-bottom : 5px ; } #main { height : 200px ; background-color : #cff ; margin-bottom : 5px ; } #footer { height : 25px ; background-color : #6cf ; margin-bottom : 5px ; } </ style > 6 . 层定位来源： CSDN 作者： Xiong-er 链接： https://blog.csdn.net/weixin_44107920/article/details/104166031

订阅 margin