首页 > TAG信息列表 > 盒子

CSS盒子属性（前半部分缺失）

CSS盒子属性 边距 内边距：padding 外边距：margin 让盒子水平居中： margin: 0 auto; 父元素与子元素外边距合并 添加overflow:hidden属性 <title>嵌套块元素坍塌</title> <style> .father { margin: 30px; background-color: black;

CSS 字体超出省略号

单行省略号 用法： 为已有宽度的盒子添加属性: 属性 取值 解释 white-space nowrap 让文字在一行内显示, 不换行 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 text-overflow ellipsis 如果溢出的内容是文字, 就用省略号代替 如图 多行省略号 多行省略号只能

抽屉原理(鸽巢原理)

已知n+ 1个正整数，它们全都小于或等于2n，证明当中一定有两个数是互质的 取n个盒子，在第一个盒子我们放1和2，在第二个盒子我们放3和4，第三个盒子是放5和6，依此类推直到第n个盒子放2n-1和2n这两个数。 如果我们在n个盒子里随意抽出n+1个数。我们马上看到一定有一个盒子是被抽空的。 因此在

JS | getBoundingClientRect()方法的基本使用

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。 返回的对象中有几个只读属性： width / x：元素矩形的宽度 height / y：元素矩形的高度 top：元素矩形顶部到页面顶部的距离 right：元素矩形右侧到页面左侧的距离 bottom: 元素矩形底

4.CSS盒子模型

盒子模型   4.1 什么是盒子模型 margin：外边距 border：边框 padding：内边距 4.2 边框 1，边框的粗细 2，边框的样式 3，边框的颜色  /*body总有一个默认的外边距*/ body{    margin:0;    padding: 0;    text-decoration: none; } /*border:粗细，样式，颜色*/ h2{    font-

css3 弹性盒子

/* 使用弹性盒子布局 */ display: flex; /* 设置子元素在父元素排列方向 */ flex-direction: row; /* 子元素沿主轴对齐方式 */ /* justify-content: space-around; */ /* 定义子元素是否换行，默认不换行，如果装不开会缩小子元素的宽度，放到父元素中 */ flex-wrap: wrap; /* 定义子

【总结】排列组合

概念 排列的定义：给定个数的元素中，取出指定个数的元素，进行排序。若一共有 \(n\) 个数，取出 \(m\) 个数，其排列数记为 \(A_n^m = \frac{n!}{(n - m)!}\)。 组合的定义：给定个数的元素中，取出指定个数的元素，不考虑排序。若一共有 \(n\) 个数，取出 \(m\) 个数，其组合数记为 \(C_n^m = \frac

多功能杆盒子 5G智慧杆网关盒子 控制网关

　　 计讯物联TG473多功能杆专用网关，针对智慧灯杆设计，丰富接口满足多功能杆灯控、摄像头、信息屏、充电桩、传感器等接入联网，支持网口、串口数据、模拟量、信号量采集，支持物联网卡5G/4G蜂窝网络，支持以太网、wifi等多数据传输，丰富协议库强大协议转换能力对接云平台实现多功能杆各智

深入flex 中align-items属性

设置外层盒子flex 显示宽度为自己盒子本身宽度 高度被拉高整个盒子 设置为垂直方向的对齐方式 align-items:flex-start  盒子不将被拉伸 显示元素本身的高度 align-items:center  盒子不将被拉伸 显示元素本身的高度 align-items:stretch   元素拉伸  

解决头部使用 position:fixed； 固定定位后遮住下方内容的问题

1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head">

弹性盒子

设置flex 子元素不在区分浮动、clear、vertical-align、不在区分行和块； display:flex; display:inline-flex; {项目排列方式} flex-direction:                       row(默认  水平左对齐)                       row-reverse(水平右对齐)        

你真的知道flex: 1；是什么意思吗？

你真的知道flex: 1；是什么意思吗？ 阳庚 已于 2022-04-27 10:47:28 修改 2420 收藏 7分类专栏： CSS 文章标签： css3版权 CSS专栏收录该内容5 篇文章0 订阅订阅专栏简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人，如有错误求大佬指出~求教

大麦盒子5s精简

前两天让宽带通给安装宽带！给送了一个大麦盒子5s，型号：DB52C7 今天打开试了试，太难用了，连手动输入wifi密码都不行，第一次必须网线连接网络，才能正常使用！ 上网上搜了下还有更多限制，比如只能使用指定网络提供商提供的网络等等 那我们就帮它瘦瘦身吧！ 1、电脑下载好当贝市场apk 将下载好的当

13 float属性（重点）

浮动的背景 开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象 浮动的属性 none：表示不浮动，默认值 left：左浮动 right：右浮动 inherit：继承父元素的浮动属性 1 文件环绕效果 文字环绕图片，可设置图片的浮动。 <!DOCTYPE html> <html> <head> <meta charset="

盒子模型

　　有两种盒子模型：标准盒子 IE盒子（也称为怪异盒子） 区别： 1.怎么算宽高：标准盒子 width，height 是实际宽高（得房率是100%），IE盒子width，height是包含padding，border（新小区建筑面积） 2.盒子模型怎么转换变成怪异盒子 box-sizing: border-box;(标准盒子 content-box) 当设置为box-sizing:con

一篇文章带你搞定BFC~

一、什么是BFC 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。   二、BFC的特点 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器

css_属性1和CSS_属性2_盒子模型

属性： 　　字体，文本 　　font-size :字体大小 　　color :文本颜色 　　text-align :对其方式 　　line-height :行高 背景： 　　background： 　　边框： 　　　　border :设置边框，符合属性 　　尺寸： 　　　　width：宽度 　　　　height：高度   <!DOCTYPE html> <html lang="en"> <head

css绝对定位

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>默认</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px;

移动web开发01

                                                                                                                                                                    

pc实战小妙招（一直记录）

line-height=width实现垂直居中方法：对具有文字的盒子以及图片有作用。 记住块级盒子默认宽度为父级盒子的宽度。 设置第一行head时，可以将a链接转换为块级元素，再进行高度、宽度、padding 、margin的设置，以及line-height=width实现（带有文字）元素居中。 实现图片和文字在盒子中同时居

前端经典布局

更新一下以前的知识，虽然现在才学，但是为时不晚，而且这些东西还不得不学，挺经典的，就是不知道当初学基础的时候为什么没有学到这些东西 一.左右两列、一行三列、一行多列、多行多列布局 一行四列还有一行多列 首先统一配置需要装在一个盒子里面，让其有个宽高并居中 1.左右两列 一个行

flex详解

1. flex:1什么意思？ 　　- flex：1实际代表的是三个属性的简写 　　      2. flex-grow：1 　　- flex-grow是用来增大盒子的，如果父级的盒子大于自己的盒子的时候，父盒子剩余空间就利用flex-grow来设置分配子盒子增大的比例 .box div:nth-child(1) { flex-grow: 1; }

flex常用固定搭配

flex简写：flex-grow（项目放大），flex-shrink （项目缩小），flex-basis（项目本身） flex: 1; 全写：flex: 1 1 0%;内容自动放大或缩小占满剩余空间。 1、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子； 2、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。 .parent { display: flex;}.son

前端布局之标准流、浮动、定位

浮动，很多布局标准流无法实现，需要用浮动脱标来完成。典型应用：让多个块元素一行显示。 设置浮动（float）的元素：脱标(脱离标准流变成行内块元素)，浮动到指定位置。原来占有的位置不保留。 一般是在标准流父盒子里摆浮动子盒子（类似table方式摆盒子，达到布局要求），此时父盒子宽高不会被子盒子

简单描述我对弹性盒子的理解及使用方法

一   .    1 什么叫弹性盒子？    2 弹性盒子的特点，优劣势？    3 怎么去使用弹性盒子？    4  flex弹性盒子的注意事项有哪些？   /*************************************************解答**********************************************/        1. 弹性盒子也叫 Fle