1.border当个属性: 作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style solid实线.dashed虚线.dotted点线 边框颜色 border-color 颜色设置 连写格式:1.border:20px solid green: /*增加宽度为20px的四周边框颜色为绿色的实线 */ 2.border-top:10px solid blue: /* 增加10px的上边框颜色为蓝色的实线*/ 3.border-bottom:5px

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解决父盒子高度塌陷</title> <style> .chlid{ width: 200px; height: 200px; background-color: teal; border: 1px solid black; float: left

使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不一样,会导致盒子的高度不一致,这样会使界面不太美观,并且可能会影响后面的盒子.可能的界面如下: 然而,我想要的是一排盒子的高度一致,如果把盒子高度固定住,比如:height:500px:会导致屏幕大小变化时,盒子高度没有随着宽的改变而改变,所以我找到了另一个方法: 把盒子的高度设为0,利用paddi

前言 前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页,这就缺少不了必要的网页布局,首先看下最近小伙伴问我的一个问题,他说一个网页有左右两个部分,左右两个部分的高度都不固定,要使得右部分的宽度充满剩余的部分,并且高度随着左边的高度发生自适应,而左侧的高度随着内容的高度发生变化,对于这么一个简单的网页布局,对于一个入行不久的小白来说遇到这样的问题肯定束手无策,本文就来整理一下我实现这种布局的集中方案. 正文 分析上面的需求,很快构建出基础的布局方案,具体效果如下:下面是总结的几种实现方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图撑开盒子高度</title> <style> .bg-box { background-image: url(../demo.jpg); background-size: 100% 100%; background-repeat: no-r

前端开发中,常常会有需求两个盒子并排排列,高度以最高的为准,且高度是内容撑开的,类似于这样 如果不是用 table 布局,而是用 div 布局,两个子盒子浮动来实现的话,实际上默认写出来是这样的 此时需要给两个子盒子设置 padding-bottom: 9999px;margin-bottom: -9999px; 就可以实现图一的样式了

1.隐藏,显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery效果显示隐藏</title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid red;displa

<style> ul{ width: 320px; //给父元素添加这两个属性 font-size: 0px; text-align: center/left; } li{ width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; //子元素添加这个属性 display: inline-block; list-style: none; background: forestgreen; } </style&g

修改 box-sizing 属性.将 box-sizing 设置为 border-box 即可.

1. 简介 元素在页面中显示成一个方块,类似一个盒子 把元素叫做盒子,设置对应的样式分别为 盒子的边框(border) 盒子内的内容和边框之间的间距(padding) 盒子与盒子之间的间距(margin) 盒子真实尺寸 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 2. 增大内容和边框的距离但不改变盒子的尺寸的方法 box-sizing:content-box | border-box 3. 少废

CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 padding:10px; 上下及两边设置 padding:5px 10px; 由上边界开始,顺时针设置 padding:10px 20px 30px 40px 单边设置 padding-top: 检索或设置对象顶边的内部边距 padding-right: 检索或设置对象右边的内部边距 padding-

1.css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ width:100px; height:100px; color:red } css页面引入方法: 1.外联式:通过link标签,链接到外部样式表到页面中. <link rel="stylesheet" type="text/css"

为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1.外联式:通过link标签,链接到外部样式表到页面中. <link rel="styleshe

html概述及html文档基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm. html文档基本结构 一个html的基本结构如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

目录 1. CSS基本语法 1.1. CSS基本定义 1.2. CSS布局属性 1.3. CSS文本常用属性 2.CSS选择器 2.1. 标签选择器 2.2. id选择器 2.3. 类选择器 2.4. 层级选择器 2.5.组选择器 2.6. 伪类和伪元素选择器 3. 块元素.内联元素和内联块元素 3.1. 块元素(行元素) 3.2. 内联元素(行内元素) 3.3. 内联块元素 3.4. 实例: 设置导航栏 4.CSS表格 5.盒模型 5.1. 什么是盒子模型 5.2设置边框 5.3. 盒子内边距

CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式.盒子模型示意图如下: 把元素叫做盒子,设置对应的样式分别为:盒子的边框(border).盒子内的内容和边框之间的间距(padding).盒子与盒子之间的间距(margin). 设置边框 设置一边的边框,比如顶部边框,可以按如下设置: border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px;

CSS盒子模型 CSS盒子模型介绍 盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式. 盒子模型示意图如下: 把元素叫做盒子,设置对应的样式分别为:盒子的边框(border).盒子内的内容和边框之间的间距(padding).盒子与盒子之间的间距(margin). 设置边框 设置一边的边框,比如顶部边框,可以按如下设置: border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .boxmodel{ /*盒子模型*/ /*盒子在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中的盒子来做比喻*/ /*把元素叫做盒子,设置对应的样式分别为: * 盒子的边框(bor

盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 margin相关技巧 1.设置元素水平居中: margin:x auto;2.margin负值让元素位移及边框合并 外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合

那天,高高兴兴的测试flex属性.大家都知道,当父盒子display:flex的时候,子盒子即使宽高和大于父盒子,也会由于flex的特性进行收缩:然而,在给父盒子加了flex-direction:column之后,居然出现了: 它们没收缩!!!!!! html: <div class="father"> <div class="box1">1</div> <div class="box2">2<