就是这个 如果你在安装好Chrome浏览器之前已经用别的浏览器打开过Jupyter_notebook了，那么你就需要修改一下默认设置，让Jupyter_notebook用Chrome浏览器打开，具体设置方法如下...的各种设置。...查找 3.获取Chrome安装位置 右键已经安装好的Chrome浏览器的桌面图标，然后选择属性，即可获取到Chrome的安装位置。下面红框框住的部分就是Chrome浏览器的安装位置。 ?...chrome安装位置 4.加入设置语句块 在第2部分查找到的c.NotebookApp.browser = ''后面，即第2部分中红框框住的空白位置加入下面语句块： import webbrowser...重启Jupyter_notebook就会默认使用Chrome浏览器打开了。
直接执行这两个命令即可： sudo update-alternatives --install /usr/bin/python python /usr/bin/...
详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距； 高度设置为auto，则会尽可能的窄。... 初始值: 0 应用于: 块级元素和替换元素 百分数: 相对于包含块的宽度(高度) max-width | max-heightt 初始值: none 应用于: 块级元素和替换元素...【为什么margin:auto无法实现垂直居中】 水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间 垂直方向不可以居中是因为块级元素的高度默认是内容高度...，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0 margin: 0 auto; 【为什么图片使用margin:auto不能水平居中】 图片无法水平居中，类似于块级元素无法垂直居中...因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。
Max Width 在设置max-width值时，它的好处在于防止width属性使用的值超过max-width的指定值。max-width的默认值是none。...初始width值为100px，并在其上加上min-width和max-width值。 结果是元素宽度未超过其包含的块/父元素的50％。...在这种情况下，设置最小宽度很重要。 使用 flexbox 将最小宽度设置为零 min-width的默认值是auto，它被计算为0。当一个元素是一个flex 项时，min-width的值不会计算为零。...意味着，将overflow设置为visible值以外的值会导致min-width被计算为0，这解决了我们不设置min-width: 0的问题。...max-width设置为等于容器宽度 ?
在CSS中实现 wrapper 目前我们已经了解了wrapper基础知识和优点，接下来我们来具体的看看在 CSS 如何使用它。 设置宽度 ? 实现wrapper第一件事就是要确认它的宽度。...为了让 wrapper 居中，使用让左右外边距的值为 auto，如下所示： .wrapper { max-width: 1170px; margin: 0 auto; } 根据 CSS...通过使用固定的宽度值，我们可以轻松地避免此步骤。 对应于这种方案，我们可以将width: 90%与max-width：1170px属性结合在一起。...Wrapper 的display类型 由于wrapper 是，因此默认情况下它是块级元素。 问题是，当要将wrapper内的内容放置在grid中时，该怎么办？...当然，我们可以直接在标签内对 --wrapper-width 进行赋值，这样就能动态设置我们想要的值。
； 工作原理 设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等； 兼容性 ?...可以看到三个子元素平分了父元素的空间，因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢？...请看示例： 修改box的宽度为flex container的1/3，one、two、three的flex-shrink分别为1，2，3： .box{ height: 100px; width: 320px...Flex Basis flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？...有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度； 当flex item被绝对定位后（
宽度＝内容宽度＋内距＋边框（width为内容宽度） * IE盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、...inline元素 默认是没有宽高的(设置width/height也不会起作用) * position确定元素的位置 static/relative/absolute/fixed...span默认是 inline元素，而inline元素 是不能设置宽高的，这里span为什么会有宽高？ float使span成为了一个BFC块，使得span可以设置宽高。...after伪元素 默认是inline的。设置after为block 另起一行。...折行：把横向排布的inline-block元素, 用@media (max-width: 640px)适配屏幕， 从而更改inline-block元素 为 block，
如果您使用的是Windows操作系统，可以右键单击图像，选择属性，而在Mac上应该有一个名为"获取信息"的选项。在本例中，图像的宽度为400像素，因此我们将宽度设置为400w。...在小屏幕上，我的博客内容（包括图像）占据了整个屏幕的宽度，但在较大屏幕上，我将内容居中显示，并设置了一个有限的最大宽度。...默认情况下，如果您没有将sizes属性添加到img标签中，它会假定尺寸为100vw，这就是为什么上面的图像根据浏览器窗口的完整宽度进行缩放。...这意味着第二个媒体查询（max-width: 500px）50vw 将永远不会被使用，因为只有在屏幕小于500像素时才为真，而在这些尺寸范围内第一个媒体查询将始终为真，因此它将始终被优先选择。...: 500px) 50vw, (max-width: 800px) 100vw, 1200px" /> 同样重要的是，确保您的默认尺寸（即没有媒体查询的尺寸）始终放在最后，因为它总是为真，所以如果它排在最前面
screen.width // 1920 screen.height // 1080 如果你给一个元素的宽度为width: 192px; 那么你的屏幕上(假设你的屏幕宽度像素为1920)可以在一行上显示...听起来有点难以理解， 下面讲一个例子： 假设， 你给某个div元素设置了width：50%的样式后， 当你缩小放大浏览器的时候，你会发现div元素总是占据了50%的宽度，我们知道，宽度百分比是依赖它的包裹元素...那么html元素有多宽呢，默认情况下它和浏览器窗口一样宽，这也就是为什么div总是占据浏览器宽度的50%，而html元素则是受限于viewport(和viewport占据一样的宽度)，换句话说，viewport...) 基于屏幕（screen.width） @media all and (max-device-width: 400px) Mobile 在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的...以下是它的6个属性： key value width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字
如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。...-- 下面的 meta 定义了 viewport 的宽度为屏幕宽度，单位是 CSS 像素，默认不缩放 --> <meta name="viewport" content="<em>width</em>=device-<em>width</em>, initial-scale...container 指定 display 属性<em>为</em> flex，就可以<em>将</em>一个<em>元素</em><em>设置</em><em>为</em> FlexBox 容器，我们可以通过定义它<em>的</em>属性，决定子<em>元素</em><em>的</em>排列方式，属性可选值有 6 种， flex-direction...响应式布局中，常用<em>的</em>设备特征有， min-<em>width</em>，数值，视口<em>宽度</em>大于 min-<em>width</em> 时应用样式 <em>max</em>-<em>width</em>，数值，视口<em>宽度</em>小于 <em>max</em>-<em>width</em> 时应用样式 orientation，
如果为子元素的顶部和底部设置了百分比，它将相对于父元素的高度，并直接进行非静态定位（默认定位）。同样，如果为子元素的左侧和右侧设置了百分比，它将与父元素宽度的直接非静态定位（默认定位）相对应。...如果子元素的 padding 和 margin 设置为百分比，无论是垂直还是水平，它们都是相对于直接父元素的宽度而言的，与父元素的高度无关。...响应式的缺点：如果有太多的样式需要在浏览器尺寸发生变化时进行更改，那么多套样式代码将非常麻烦。...(media feature)" href"mystylesheet.css" @media screen and (max-device-width:960px){ body{background:red;} } 常用响应断点阈值设置 4.3 Rem
解析HTML文件，创建DOM树 解析CSS，形成CSS对象模型 将CSS与DOM合并，构建渲染树（rendering tree） 布局和绘制 浏览器解析CSS是从左开始还是从右？为什么？ 从右。...和offsetHeight 设置style属性 对应的css属性如下： 盒子模型相关属性 定位及浮动属性 节点内部的文字结构 repaint:改变不影响元素。..., maximum-scale=1.0, user-scalable=no"> 图片适配 //使用这个 img {max-width:100%} //最大宽度显示为自身的100% //不用这个...img {width: 100%} //宽度为外层容器的宽度 图片会被无情地拉伸 media 媒体查询 media screen and (min-width:1000px) { body{...rem 根据当前屏幕的宽度和设计稿的宽度，算出html的基准值 假设当前屏幕宽度为375px 设计稿上是640px 当前屏幕宽度/设计稿宽度 = x / 100 => x = 当前屏幕宽度/设计稿宽度
限制元素的最大宽度 width 元素的宽度 三者之间的优先级： min-width > max-width > width 即使width后面出现!...当浏览器放大导致元素的宽度大于 max-width 时，元素的 width 就会被 max-width 值取代。...block 设置元素为块级元素，块级元素可以独占⼀⾏，可设宽⾼，默认宽为父元素宽。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 flex 弹性布局，采用flex布局元素称为flex容器。...不足：代码不美观 将元素的父元素设置font-size:0; 。
height:auto 高度自动是默认配置，解释为盒子的高度随着内容的增多自动增加，不用额外配置。所以那些给元素加高度自动的童鞋要注意了，那是无用代码。...这点与宽度是不同的，父元素宽度为auto的时候，子元素也可以拿到宽度。 ?...普通文档流，父元素设置高度100% 特殊的元素html,body 元素设置百分比的时候参考为屏幕高度，此时html,body的任何直接子元素设置高度百分比都有效。作为常识要清楚这一点。...max min特性 超越最大 作为常识我们知道!important的权重是很大的，而min- max- 设置的值比width height中设置的important还要大。...important; max-height:50px; } 流体特性 流体特性主要体现在了宽度上，在我们做流体或者自适应布局的时候，通常希望设置边界。媒体查询也是部分依赖了这个原理。
将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。...左边元素设置为absolute定位，并且宽度设置为 200px。将右边元素的margin-left的值设置为200px。...以左边宽度固定为 200px 为例 -（1）利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。...将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。...-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
给 header、content、footer 设置相同的 width 或者 max-width（显示的宽度都一样，但是前者内容过长会溢出，后者会换行），再设置 margin 达到水平居中。...，且正是为了防止被盖住，右元素宽度才会由默认的撑满屏幕变为撑满剩余部分。...该属性默认为 0，表示即使该行有额外空间也不会占满，设置为 1 表示右元素占满额外空间。...此时布局是这样的： image.png 这里要注意的点：块级元素在不显式设置宽度的情况下确实撑满整个屏幕，从这个角度来看，width 设置为 100% 似乎没有必要。...flex 只有一个值时，设置的是 flex-grow，代表弹性子元素对父元素剩余空间的分配，因为不设置的时候默认是 0，所以这里只有设置了 1 的主列参与分配剩余空间，从而实现宽度自适应。
下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem 一、rem 单位 rem 是一个相对单位，相对根元素 标签 字体大小的单位，一般浏览器默认的是 1rem =...原来是因为我电脑显示的 缩放与布局 设了1.25倍，然而1920 ÷ 1.25 刚好等于 1536px， 而且我想谷歌浏览器默认是跟随系统的设置，这样就能解释为什么谷歌浏览器页面宽度只有 1536px...为什么用rem 上面说到为了好计算，我默认会将根元素的字体大小设置为 50px ，也就是说1rem = 50px 就拿内容宽度是1440px的设计图为例，换算成rem做单位就是28.8rem，而且再利用...就像下面的例子 html { font-size: 50px; } @media (max-width: 1536px) { html { font-size: 40px...*/ width: 28.8rem; margin: 0 auto; } 当浏览器宽度小于等于 1536px 的时候（是因为 1920 的 0.8倍 刚好等于 1536） ，根元素的字体大小缩小成原来的
宽度属性 宽度属性: width: 长度值|百分比|auto 最大宽度： max-width: 长度值|百分比|auto 最小宽度： min-width: 长度值|百分比|auto 高度属性...>,,等 边框属性 边框宽度(border-width) 边框颜色(border-color) 边框样式(border-style) 设置元素边框宽度 border-width...] border-left:[宽度][样式][颜色] border-right:[宽度][样式][颜色] border-bottom:[宽度][样式][颜色] 内边距属性 设置元素的内容与边框之间的距离...>,,,,, 等 行级元素(内联元素)，一行显示 ,, 等 display属性 inline 元素将显示为内联元素,元素前后没有换行符...** block 元素将显示为块级元素,元素前后带有换行符** inline-block 行内块元素,元素显示为inline，具有block相应特性** none 此元素不会被显示**
例如，将下面的代码插入样式表，在屏幕宽度小于等于400像素的设备上，h1元素的文字颜色就会变成绿色： @media screen and (max-device-width: 400px) { ...例如下面的代码会给视口最大宽度为360像素的显示屏设备加载一个名为phone.css的样式表。...怎么阻止Safari或其他移动浏览器做这样的默认处理呢？ 可以用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签。...标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。...只需在CSS中作如下声明： img { max-width: 100%; } img,object,video,embed { max-width: 100%; } 此外，也可以给弹性图片设置阈值，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
